Menu
How do you add a CSS class to an existing REACT element on click?
I have a JSFiddle created: https://jsfiddle.net/5r25psub/
In the fiddle, the code only works if I have the statement: this.setState({color:blue});
I want something like this.setState({className: 'green'});
What am I doing wrong?
Code:
<html>
<script>
var Hello = React.createClass({
getInitialState: function(){
return {
color: 'blue'
};
},
handleClick: function(){
if (this.state.color === 'blue'){
this.setState({className = " green"});
} else {
this.setState({color: 'blue'});
}
},
render: function() {
return <button className={this.state.className} onClick={this.handleClick}>My background is: {this.state.color}, Click me to change</button>;
}
});
React.render(<Hello name="World" />, document.getElementById('container'));
</script>
<body>
<script src="https://facebook.github.io/react/js/jsfiddle-integration.js"></script>
<style>
.green {
background-color: lightgreen;
}
.blue {
background-color: lightblue;
}
</style>
<div id="container">
<!-- This element's contents will be replaced with your component. -->
</div>
</body>
</html>
811
Use Native JavaScript to Set Dynamic className Values in React. The simplest way to add dynamic className values is to combine curly braces and set the className attributes equal to the state variables. This is a fairly simple feature available in all versions of JavaScript.
So, basically, we will change the background color of a container by making use of the onClick() event. We will initially define the CSS for our app. Once a user clicks the button then the background color gets changed by changing the state. The principle of React hooks will make things easier for us.
But you might wonder how you can dynamically add or remove classes to React Elements. Maybe you already found out that you can use the component’s state, but you still don’t know exactly how the state plays together with styling and rendering your elements. Let’s have a walk through this concept.
The most common way of creating a click event with CSS is using the checkbox hack. This method has broad browser support. You need to add a for attribute to the <label> element and an id attribute to the <input> element. Watch a video course CSS - The Complete Guide (incl. Flexbox, Grid & Sass)
If you’re just starting out with React, you might soon get to the point where you want to dynamically change the styling of some React Elements – e.g. at the click of a button. In this post we have a closer look at this concept.
The classList.toggle method removes an existing class from the element if the class is present. Otherwise, it adds the class to the element. You can pass as many classes to the toggle () method as necessary. If you need to add a class to the element on click, use the classList.add method.
You can use the module classnames found here:
https://www.npmjs.com/package/classnames
So you would do something like:
getClassNames() {
return classNames({
'blue': this.state.clicked,
'green': !this.state.clicked
});
},
render () {
return <button className={this.getClassNames()} onClick={this.setState({clicked: !this.state.clicked})>
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
