React Js by conditionally applying class attributes

Question

I want to conditionally show and hide this group of buttons depending on what is passed from the parent component, which looks like this:

<TopicNav showBulkActions={this.__hasMultipleSelected} /> 

....

 __hasMultipleSelected: function() { return false; //return true or false depending on data } 

....

 var TopicNav = React.createClass({ render: function() { return ( <div className="row"> <div className="col-lg-6"> <div className="btn-group pull-right {this.props.showBulkActions ? 'show' : 'hidden'}"> <button type="button" className="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> Bulk Actions <span className="caret"></span> </button> <ul className="dropdown-menu" role="menu"> <li><a href="#">Merge into New Session</a></li> <li><a href="#">Add to Existing Session</a></li> <li className="divider"></li> <li><a href="#">Delete</a></li> </ul> </div> </div> </div> ); } }); 

However, nothing happens with {this.props.showBulkActions? 'show hidden'}. Am I something wrong here?

Answer 1

curly braces are inside the string, so it is evaluated as a string. They should be outside, so this should work:

 <div className={"btn-group pull-right " + (this.props.showBulkActions ? 'show' : 'hidden')}> 

Note the space after pull-right. You do not want to accidentally provide the "pull-rightshow" class instead of the "pull-right show". There should also be parentheses.

Answer 2

As others have noted, the classnames utility is the currently recommended approach for handling conditional CSS class names in ReactJs.

In your case, the solution will look like this:

 var btnGroupClasses = classNames( 'btn-group', 'pull-right', { 'show': this.props.showBulkActions, 'hidden': !this.props.showBulkActions } ); 

...

 <div className={btnGroupClasses}>...</div> 

As a side note, I suggest you try to avoid using the show and hidden classes, so the code might be simpler. Most likely, you do not need to set a class to display anything by default.

Answer 3

If you are using a transpiler (like Babel or Traceur), you can use the new ES6 " pattern string ".

Here is the @ spitfire109 answer, modified accordingly:

 <div className={`btn-group pull-right ${this.props.showBulkActions ? 'shown' : 'hidden'}`}> 

This approach allows you to do such neat things by providing either s-is-shown or s-is-hidden :

 <div className={`s-${this.props.showBulkActions ? 'is-shown' : 'is-hidden'}`}> 

Answer 4

You can use string literals here

 const Angle = ({show}) => { const angle = 'fa ${show ? 'fa-angle-down' : 'fa-angle-right'}'; return <i className={angle} /> } 

Answer 5

Spending on @ spitfire109 a great answer, you can do something like this:

 rootClassNames() { let names = ['my-default-class']; if (this.props.disabled) names.push('text-muted', 'other-class'); return names.join(' '); } 

and then inside the render function:

 <div className={this.rootClassNames()}></div> 

stores jsx short

Answer 6

Or use npm classnames . This is very easy and useful, especially for building a list of classes.

Answer 7

You can use ES6 arrays instead of classes. The answer is based on an article by Dr. Axel Rauschmeier: Conditionally adding records inside arrays and object literals .

 <div className={[ "classAlwaysPresent", ...Array.from(condition && ["classIfTrue"]) ].join(" ")} /> 

Answer 8

A more elegant solution that is better for service and readability:

 const classNames = ['js-btn-connect']; if (isSelected) { classNames.push('is-selected'); } <Element className={classNames.join(' ')}/> 

Answer 9

2019:

The response to the lake is many helpful. But for this you do not need the npm package. just create somewhere the name classnames function and call it when you need to;

 function classnames(obj){ return Object.entries(obj).filter( e => e[1] ).map( e=>e[0] ).join(' '); } 

or

 function classnames(obj){ return Object.entries(obj).map( ([k,v]) => v?k:'' ).join(' '); } 

example

  stateClass= { foo:true, bar:false, pony:2 } classnames(stateClass) // return 'foo pony' 

inspirational bonus only

you can declare a helper element and take its classList to access the DOMToken List and maybe write something like that

 const classes = document.createElement('span').classList; //DOMToken​List; function classnames(obj){ classes.value = ''; return Object.entries(obj).reduce( (c, [k,v]) => (c.toggle(k,v),c), classes ).value; } 

Answer 10

You can use this:

 <div className={"btn-group pull-right" + (this.props.showBulkActions ? ' show' : ' hidden')}> 

Answer 11

It will work for you

 var TopicNav = React.createClass({ render: function() { let _myClasses = 'btn-group pull-right {this.props.showBulkActions?'show':'hidden'}'; return ( ... <div className={_myClasses}> ... </div> ); } }); 

Answer 12

You can use this npm package. It handles everything and has parameters for static and dynamic classes based on a variable or function.

 // Support for string arguments getClassNames('class1', 'class2'); // support for Object getClassNames({class1: true, class2 : false}); // support for all type of data getClassNames('class1', 'class2', null, undefined, 3, ['class3', 'class4'], { class5 : function() { return false; }, class6 : function() { return true; } }); <div className={getClassNames('show', {class1: true, class2 : false})} /> // "show class1" 

Answer 13

Based on the value of this.props.showBulkActions you can dynamically switch classes as follows.

 <div ...{...this.props.showBulkActions ? { className: 'btn-group pull-right show' } : { className: 'btn-group pull-right hidden' }}> 

Answer 14

I would like to add that you can also use variable content as part of the class

 <img src={src} alt="Avatar" className={"img-" + messages[key].sender} /> 

The context is a chat between the bot and the user, and the styles vary depending on the sender, this is the result of the browser:

 <img src="http://imageurl" alt="Avatar" class="img-bot"> 

Answer 15

You can use if the concept is

 var Count=React.createClass({ getInitialState: function() { var state={counter:1}; setInterval(function(){ this.setState( {counter:this.state.counter+(this.state.counter==1000?9999999999:1)}) }.bind(this),1); return state; }, render:function(){ return( <div> Counter<br/> {this.state.counter} </div> ) } } )