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.
Table of Content
- to Toggle CSS class for element
- to Toggle multiple CSS classes for element
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
// 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" : "" } > w3wiki </h1> <button className= "button" onClick={ this .toggleClass} > Click to toggle class </button> </div> ); } } export default App; |
CSS
/* 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 .
Javascript
// 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}> w3wiki </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
/* 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.
Contact Us