Menu
I want to conditionally show and hide this button group depending on what is passed in 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> ); } }); Nothing is happening however, with the {this.props.showBulkActions ? 'show' : 'hidden'}. Am I doing anything wrong here?
814
The simplest approach is to use a ternary statement inside of a template literal. In this example, banner is always on the div , but active depends on the active prop. If you have a lot of class names that need to be conditional on the same element, it can get a little messy, but it still works.
Conditional rendering in React works the same way conditions work in JavaScript. Use JavaScript operators like if or the conditional operator to create elements representing the current state, and let React update the UI to match them. This example renders a different greeting depending on the value of isLoggedIn prop.
Not elegant but it works. As others have commented, classnames utility is the currently recommended approach to handle conditional CSS class names in ReactJs. var btnGroupClasses = classNames ( 'btn-group', 'pull-right', { 'show': this.props.showBulkActions, 'hidden': !this.props.showBulkActions } );
Follow are multiple ways of applying class attributes inside JSX in ReactJS. By using ternary inside class attribute like below we can easily add conditional class. See the code segment below: If we have a transpiler (such as Babel or Traceur) available we can use the new ES6 template strings.
In React you can conditionally render Components, but also their attributes, like props, className, id, and more. In React it's very good practice to use the ternary operator which can help you conditionally render Components. An example also shows how to conditionally render Component and its style attribute.
When we are writing JSX code often time we need to put class attribute based on some condition. Inside JSX we are not allowed to use if, for or any other statements. On the other hand we are allowed to use expression inside JSX. As we are allowed to use expression, we can use ternary to apply conditional class inside JSX.
The curly braces are inside the string, so it is being evaluated as string. They need to be outside, so this should work:
<div className={"btn-group pull-right " + (this.props.showBulkActions ? 'show' : 'hidden')}> Note the space after "pull-right". You don't want to accidentally provide the class "pull-rightshow" instead of "pull-right show". Also the parentheses needs to be there.
72
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
