Open In App

Changing CSS styling with React onClick() Event

Last Updated : 25 Oct, 2023
Improve
Improve
Like Article
Like
Save
Share
Report

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



Similar Reads

What is the purpose of the onClick event in React?
The onClick event plays an important role for enhancing user interactions with components in react applications which allows developers/programmers to call a function or method that gets executed when a particular element is clicked. Whether triggering a state change, navigating to another page, or performing a custom action, the onClick event is a
4 min read
React onClick Event
React onClick is an event handler utilized to capture and respond to user clicks on specific elements, typically interactive ones like buttons or links. It is similar to the HTML DOM onclick event but uses the camelCase convention in React. React onClick captures the user's click responses and executes the handler functions. React onClick Syntax:on
3 min read
How to stop event propagation with inline onclick attribute in JavaScript ?
Use HTML DOM stopPropagation() method to stop the event from propagating with inline onclick attribute which is described below: HTML DOM stopPropagation() Event Method: The stopPropagation() method is used to stop propagation of event calling i.e. the parent event is called we can stop the propagation of calling its children by using the stopPropa
2 min read
HTML DOM onclick Event
The HTML DOM onclick event occurs when the user clicks on an element. There are three ways to add onclick events: Syntax: In HTML: &lt;element onclick="myScript"&gt; In JavaScript: object.onclick = function(){myScript}; In JavaScript, using the addEventListener() Method: object.addEventListener("click", myScript); Example 1: Using HTML C/C++ Code
2 min read
jQuery click() Method vs onClick Event
jQuery is the JavaScript library known for its lightweight, fast, and cross-platform features. It is an open-source library that goes by the motto "Write less, do more". The main objective of jQuery is to make Java script so easy that one can create more attractive and interactive websites. jQuery has multiple events like jQuery onClick(), jQuery c
5 min read
How to change states with onClick event in ReactJS using functional components ?
In modern web applications, to change states with onClick event in React JS using functional components is done by Hooks in React as the functional components don't have inbuilt states like class components. With Hooks, state objects are completely independent of each other, so you can have as many state objects as you want. In a single-page applic
2 min read
Call multiple JavaScript functions in onclick event
To Call multiple JavaScript functions in onclick event, we have different approaches. In this article, we are going to see how to call multiple JavaScript functions in onClick event. Below are the approaches to calling multiple JavaScript functions in onclick event: Table of Content Calling all functions at onceCalling one function that contains re
2 min read
HTML onclick Event Attribute
The onclick event attribute in HTML works when the user clicks on the button. When the mouse clicked on the element then the script runs. It basically executes a script or function on a click event and is used for interactive elements like buttons and links. Syntax&lt;element onclick = "script"&gt;Attribute Value This attribute contains a single va
2 min read
JavaScript onclick Event
The onclick function in JavaScript is an event handler that is used to respond to or handle the mouse click on the web page. It takes a callback function which will be invoked later at the time when the event is triggered. In JavaScript, we can use the onclick function in two ways as listed below: Table of Content Applying onclick function as an at
2 min read
How to Add & Remove Value Onclick Event in HTML ?
To add a value to an element's onclick event in HTML, you can set the event attribute to a JavaScript function or expression, like onclick="myFunction()". To remove it, you can set the attribute to an empty string, like onclick=' '. This allows for dynamic manipulation of event behavior based on user interactions. Using addEventListener methodThis
2 min read