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

Popular posts from this blog

Java 3D LWJGL collision -

spring - SubProtocolWebSocketHandler - No handlers -

methods - python can't use function in submodule -