ReactJS: Have one className with binding and another className without

Question

How do I have a static className with a className that is dynamic? For example, in this: https://jsfiddle.net/uwadhwnr/112/

<button className={this.state.color}>, if I do <button className="cheese {this.state.color}">, the this.state.color won't render because it's in quotations, but I want to have both classes.

Possible duplicate of [Concatenating variables and strings in React](http://stackoverflow.com/questions/39523040/concatenating-variables-and-strings-in-react) — Andrew Li, Mar 29 '17 at 02:04

score 5 · Accepted Answer · answered Mar 29 '17 at 08:29

If you need to add the state color as className to "cheese" then you can do it like

<button className={"cheese " + this.state.color}>

Working code

var Hello = React.createClass({
    getInitialState: function(){
        return {
            color: 'blue'
        };
    },
    handleClick: function(){
        if (this.state.color === 'blue'){
            this.setState({color: 'green'});
        } else {
            this.setState({color: 'blue'});
        }
    },
    render: function() {
        return <button className={"cheese " + this.state.color} onClick={this.handleClick}>My background is: {this.state.color}, Click me to change</button>;
    }
});

React.render(<Hello name="World" />, document.getElementById('container'));

JSFIDDLE

ReactJS: Have one className with binding and another className without

1 Answers1