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?
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.
You could use just a Vanilla JS (event.target and classList):
handleClick = event => event.target.classList.add('click-state');
render() {
return <div className="base-state" onClick={this.handleClick}>Click here</div>;
}
BUT don't do that!
React should handle changes in the DOM, so rely on modifying CSS classes via React.
You could set click state in the click handler function and use it to set the class name conditionally using a template literal.
If you're using a function component, you can do it this way using the useState hook:
const [clicked, setClicked] = useState(false);
<div className={ `base-state ${clicked && 'click-state'}` } onClick={ () => setClicked(true) }>click here</div>