How to add or remove a className on event in ReactJS?

Question

I am quite new to React and I am struggling a little with converting my thinking from standard js.

In my react component I have the following element:

<div className='base-state' onClick={this.handleClick}>click here</div> 

The behaviour I am looking for is to add an extra class on click. My first idea was to try and add the class in the click handler function e.g.

handleClick : function(e) {    <add class "click-state" here> } 

I haven't been able to find any examples that do anything similar though, so I am fairly sure I am not thinking about this in the right way.

Can anyone point me in the right direction?

Answer 1

The list of classes can be derive from the state of the component. For example:

var Component = React.createClass({   getInitialState: function() {     return {       clicked: false     };   },    handleClick: function() {     this.setState({clicked: true});   },    render: function() {     var className = this.state.clicked ? 'click-state' : 'base-state';     return <div className={className} onClick={this.handleClick}>click here</div>;   } }); 

Calling this.setState will trigger a rerender of the component.