Open In App
Related Articles

Changing CSS styling with React onClick() Event

Improve Article
Improve
Save Article
Save
Like Article
Like

Changing CSS styling with React onClick() Event simply means changing the CSS property or CSS classes when the click event triggers. It can be done by switching the states to update the classes when a button is clicked

Prerequisites

Approach

Changing CSS styling with React onClick() Event we will use useState variable. We will change the background and 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 the background color gets changed by changing the state.

Now, let’s get started with the file structure and coding part.

Creating React App

Step 1: Create a React application using the following command:

npx create-react-app appname

Make sure that the app name is starting with lower-case letters.

Step 2: After creating your project folder. Now, jump into the respective folder by making use of the following command:

cd appname

Project Structure: Now, the file structure will look like the following:

Our app file Structure

Example: Using useState variable to update the class name on click event to switch the style of component between light and dark mode.

Javascript




// Filename - App.js
 
import React, { useState } from "react";
import "./App.css";
const App = () => {
    const [style, setStyle] = useState("light");
 
    const changeStyle = () => {
        console.log("you just clicked");
        if (style !== "light") setStyle("light");
        else setStyle("dark");
    };
    return (
        <div className="App">
            <h1 className="geeks">GeeksforGeeks</h1>
            <h3 className={style}>
                CHANGE CSS STYLING WITH ONCLICK EVENT
            </h3>
            <button
                className="button"
                onClick={changeStyle}
            >
                Click me!
            </button>
        </div>
    );
};
export default App;


CSS




/* Filename - App.css */
 
.App {
    text-align: center;
}
 
.geeks {
    color: green;
}
 
.light {
    color: red;
    background-color: white;
}
.dark {
    color: lightgreen;
    background-color: gray;
}
 
button {
    font-size: large;
    margin: 2%;
    background-color: green;
    color: white;
    border-radius: 5px;
    padding: 10px;
}


Step to run the application: Run the code by making use of the following command:

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output. After, onClick component switches to dark and light mode.

Peek-2023-10-18-17-08


Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out - check it out now!

Last Updated : 25 Oct, 2023
Like Article
Save Article
Previous
Next
Similar Reads
Complete Tutorials