HiveBrain v1.2.0
Get Started
← Back to all entries
patternjavascriptreactCritical

Conditionally applying class attributes in React

Submitted by: @import:stackoverflow-api··
0
Viewed 0 times
classconditionallyattributesreactapplying

Problem

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



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


var TopicNav = React.createClass({
    render: function() {
    return (
        
            
                
                    
                      Bulk Actions 
                    
                    
                      Merge into New Session
                      Add to Existing Session
                      
                      Delete
                    
                
            
        
        );
      }
    });


Nothing is happening however, with the {this.props.showBulkActions ? 'show' : 'hidden'}. Am I doing anything wrong here?

Solution

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



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.

Code Snippets

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

Context

Stack Overflow Q#30533171, score: 871

Revisions (0)

No revisions yet.