How to change the Style of an element on click in React

This article will show you how to change the style of an element on click in React with examples of ways to use the ternary operator or event.target.style method.

Change the Style of an element on click in React

Using event.target.style method

The event.target: is the element that the user interacts with. The target can be the element container or the element inside the container, and the return value of this call is an object with methods for us to access and change the value. This way, we will change the values ​​in the style field to change the style of an element on click.

Code:

import React from "react";

const App = () => {

    const handleClick = (event) => {
        event.preventDefault();
        event.target.style.color = "white";
        event.target.style.backgroundColor = "black";
    };

    return (
        <div>
            <button onClick={handleClick}>Click me!!</button>
        </div>
    );
};

export default App;

Output:

You can see that when we click the button, we will call the handleClick function to change the element’s style values with the event.target.style method. We can modify any allowed style value by pointing to it in this method. Like the example above, I changed the button’s text color from black to white and the background color from white to black.

That’s how we change the style of an element on click in React this way, or you can also follow the following way.

Using inline Style with the ternary operator

Javascript ternary is like javascript if else condition. Ternary operator helps programmers to quickly check a condition in javascript. 

Its syntax will be a conditional sentence followed by return values ​​with the condition true and false with a “?” and the “:” sign. We can change the element’s style by using inline style in combination with ternary and state in React.

Its syntax will be a conditional sentence followed by return values ​​with the condition true and false with a “?” and the “:” sign. This way, we can use to change the style of the element using inline style.

Code:

import React from "react";
import { useState } from "react";

const App = () => {

    const [isActive, setIsActive] = useState(false)
    const handleClick = () => {
        setIsActive((current) => !current);
    };

    return (
        <div>
            <button
                style={{
                    backgroundColor: isActive ? "green" : "",
                    color: isActive ? "white" : "",
                }}
                onClick={handleClick}
            >
                Click me!!
            </button>
        </div>
    );
};

export default App;

Following the code, you can see that we will use a state to check the state of the style that we need to set. For example, when clicking a button, the state will change from false to true, then the style of the button also changes according to this value, and we get the effect of changing the text color and background color of the button. 

Summary

In summary, the article has shown us how to easily change the style of an element on click in React using inline style with the ternary operator or using event.target.style method. However, using an inline style would help because it accesses style properties more concisely.

Nathaniel Kirk

Hi, my name’s Nathaniel Kirk. I’m interested in learning and sharing knowledge about programming languages. My strengths are C, C++, Python, HTML, CSS, Javascript, and Reactjs. If you have difficulty with them, don’t worry. I’m here to support you.

---

Name of the university: PTIT
Major: IT
Programming Languages: C, C++, Python, HTML, CSS, Javascript, Reactjs