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.
// Filename - App.js import React, { Component } from "react" ;
import "./App.css" ;
class App extends Component { constructor(props) {
super (props);
this .state = {
isClassActive: false ,
};
}
// Function to toggle class
toggleClass = () => {
this .setState({
isClassActive: ! this .state.isClassActive,
});
};
render() {
return (
<div className= "mainDiv" >
{ /* If isClassActive is true it will
add active class to h1 otherwise it
will remove active class */ }
<h1
className={
this .state.isClassActive
? "active"
: ""
}
>
GeeksforGeeks
</h1>
<button
className= "button"
onClick={ this .toggleClass}
>
Click to toggle class
</button>
</div>
);
}
} export default App;
|
/* Filename - 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 .
// Filename - App.js import React, { Component } from "react" ;
import "./App.css" ;
class App extends Component { constructor(props) {
super (props);
this .state = {
currentClass: "black" ,
};
}
// function to change class according to button click
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" >
{ /* class of element will be changed
according to the button click */ }
<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;
|
/* Filename - 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.