How to toggle CSS class on an element dynamically using ReactJS ?
Sometimes developers need to toggle CSS class on an element dynamically using ReactJS due to the DOM events and modifications after the User Interaction or change in data from API. For example, when the user clicks on one element we can change the styling for any particular element by toggling the CSS class.
Prerequisites:
These are the approaches to implement toggle classes on elements using React JS.
Steps to Create React Application:
Step 1: Use this command in the terminal to initialize a new React Project.
npx create-react-app testapp
Step 2: Move to the project directory.
cd testapp
Project directory:
Approach 1: to Toggle CSS class for element
We will implement the code to toggle between the single class. When a user clicks on the button, it will add and remove an active class from the <h1> elements.
Example: This example implements single class toggle for given element.
Javascript
import React, { Component } from "react" ;
import "./App.css" ;
class App extends Component {
constructor(props) {
super (props);
this .state = {
isClassActive: false ,
};
}
toggleClass = () => {
this .setState({
isClassActive: ! this .state.isClassActive,
});
};
render() {
return (
<div className= "mainDiv" >
{
}
<h1
className={
this .state.isClassActive
? "active"
: ""
}
>
GeeksforGeeks
</h1>
<button
className= "button"
onClick={ this .toggleClass}
>
Click to toggle class
</button>
</div>
);
}
}
export default App;
|
CSS
.mainDiv {
margin : 20px auto ;
text-align : center ;
}
.active {
font-size : 40px ;
color : green ;
}
.button {
padding : 7px 10px ;
background-color : lightblue;
color : red ;
border-radius: 2px ;
}
|
Steps to Run: To start the react app, run the below command on your terminal and verify that react app is working fine.
npm start
Output: This output will be visible on the http://localhost:3000/ on the brower window.
Approach 2: to Toggle multiple CSS classes for element
We will implement a toggle between multiple classes. We have numerous buttons, and when the user clicks on any button, we set the class according to the clicked button in the element.
Example: This example implements dynamic toggle multiple classes for the given element .
Javascript
import React, { Component } from "react" ;
import "./App.css" ;
class App extends Component {
constructor(props) {
super (props);
this .state = {
currentClass: "black" ,
};
}
makeGreen = () => {
this .setState({ currentClass: "green" });
};
makeRed = () => {
this .setState({ currentClass: "red" });
};
makeYellow = () => {
this .setState({ currentClass: "yellow" });
};
makeBlue = () => {
this .setState({ currentClass: "blue" });
};
render() {
return (
<div className= "mainDiv" >
{
}
<h1 className={ this .state.currentClass}>
GeeksforGeeks
</h1>
<button
className= "button"
onClick={ this .makeGreen}
>
Make Green
</button>
<button
className= "button"
onClick={ this .makeRed}
>
Make Red
</button>
<button
className= "button"
onClick={ this .makeYellow}
>
Make Yellow
</button>
<button
className= "button"
onClick={ this .makeBlue}
>
Make Blue
</button>
</div>
);
}
}
export default App;
|
CSS
.mainDiv {
margin : 20px auto ;
text-align : center ;
}
. black {
font-size : 20px ;
color : black ;
}
. green {
font-size : 40px ;
color : green ;
}
. red {
font-size : 60px ;
color : red ;
}
.yellow {
font-size : 30px ;
color : yellow;
}
. blue {
font-size : 50px ;
color : blue ;
}
.button {
padding : 7px 10px ;
background-color : lightblue;
color : red ;
border-radius: 2px ;
margin : 2px ;
}
|
Steps to Run: To start the react app, run the below command on your terminal and verify that react app is working fine.
npm start
Output: This output will be visible on the http://localhost:3000/ on the brower window.
Last Updated :
13 Nov, 2023
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...