javascript - React Js conditionally applying class attributes -
i want conditionally show , hide button group depending on passed in parent component looks 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 new session</a></li> <li><a href="#">add existing session</a></li> <li classname="divider"></li> <li><a href="#">delete</a></li> </ul> </div> </div> </div> ); } });
nothing happening however, {this.props.showbulkactions ? 'show' : 'hidden'}. doing wrong here?
the curly braces inside string, being evaluated string. need outside, should work:
<div classname={"btn-group pull-right " + (this.props.showbulkactions ? 'show' : 'hidden')}>
note space after "pull-right". don't want accidentally provide class "pull-rightshow" instead of "pull-right show". parentheses needs there.
Comments
Post a Comment