Change classes to an element with react

Question

I'd like to do something like Angular does with ng-class. I'm using react-tabs library (https://github.com/mzabriskie/react-tabs) and now I want to be able to change the background of the selected tab. The library comes with a default effect for the selected tab but I want personalize it.

Answer 1

if you're using an es6 transpiler you can use template strings and a ternary:

className={`base-class ${this.props.isActive? 'is-active' : ''}`}

Answer 2

This works:

<div className={this.props.canChange ? "change-button" : "change-button gray-out"}>
blah
</div>

Basically classname is a property of the node.

Answer 3

Just wrap your <Tabs> element with an element of your own <div className="my-tabs"> and go from there! You can use the aria-selected to style the selected state.