Open In App

How to toggle CSS class on an element dynamically using ReactJS ?

Improve
Improve
Like Article
Like
Save
Share
Report

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




// 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;


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}>
                    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




/* 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.



Last Updated : 13 Nov, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads