Change the Style of an element on click in React

avatar

Borislav Hadzhiev

Last updated: Jul 25, 2022

banner

Photo from Unsplash

Change the Style of an element on click in React #

To change the style of an element on click in React:

  1. Set the onClick prop on the element.
  2. When the element is clicked, set the active state.
  3. Use a ternary operator to conditionally set the new styles based on the state variable.
App.js
import {useState} from 'react'; export default function App() { const [isActive, setIsActive] = useState(false); const handleClick = () => { // 👇️ toggle setIsActive(current => !current); // 👇️ or set to true // setIsActive(true); }; return ( <div> <button style={{ backgroundColor: isActive ? 'salmon' : '', color: isActive ? 'white' : '', }} onClick={handleClick} > Click </button> </div> ); }

toggle element styles on click

We set the onClick prop on the element, so every time it is clicked, the handleClick function is invoked.

In our handleClick function, we simply toggle the isActive state.

You could set the state to active, e.g. setIsActive(true), if you don't want to change the styles every time the element is clicked.

We used a ternary operator to conditionally set the backgroundColor style on the element.

App.js
<button style={{ backgroundColor: isActive ? 'salmon' : '', color: isActive ? 'white' : '', }} onClick={handleClick} > Click </button>

The ternary operator is very similar to an if/else statement.

It checks if the value to the left of the question mark is truthy, and if it is, the operator returns the value to the left of the colon, otherwise the value to the right is returned.

In other words, if the isActive variable stores a true value, we set the backgroundColor property to salmon, otherwise set it to an empty string.

You could use this approach to change the styles of any element in the component. It doesn't necessarily have to be the one the user clicked.

Alternatively, you can use the currentTarget property on the event object.

To change the style of an element on click in React:

  1. Set the onClick prop on the element.
  2. In the event handler function, access the element as event.currentTarget.
  3. Use the style object to set styles on the element.
App.js
export default function App() { const handleClick = event => { event.currentTarget.style.backgroundColor = 'salmon'; event.currentTarget.style.color = 'white'; event.currentTarget.classList.add('my-class-1', 'my-class-2'); }; return ( <div> <button onClick={handleClick}>Click</button> </div> ); }

change style of element on click

We can access the element via the currentTarget property of the event object.

The currentTarget property on the event gives us access the element that the event listener is attached to.

Whereas the target property on the event gives us a reference to the element that triggered the event (could be a descendant).

The example above shows how to change the style of an element on click. If you need to toggle the styles of an element on click, conditionally check if the styles are present.
App.js
export default function App() { const handleClick = event => { // 👇️ toggle styles on click if (event.currentTarget.style.backgroundColor) { event.currentTarget.style.backgroundColor = null; event.currentTarget.style.color = null; } else { event.currentTarget.style.backgroundColor = 'salmon'; event.currentTarget.style.color = 'white'; } // 👇️ toggle class on click event.currentTarget.classList.toggle('my-class-1', 'my-class-2'); }; return ( <div> <button onClick={handleClick}>Click</button> </div> ); }

toggle element styles on click

If you need to set a style on the element on click, directly set the style via the element's style object.

App.js
event.currentTarget.style.backgroundColor = 'salmon';

However, if you have to toggle the style every time the element is clicked, you have to conditionally check if the class is present and remove it if it is, otherwise add the class.

If you need to add a class to the element, use the classList.add method.

App.js
// 👇️ add class event.currentTarget.classList.add('my-class-1', 'my-class-2'); // 👇️ remove class event.currentTarget.classList.remove('my-class-1', 'my-class-2');

The method can be passed one or more classes.

If you need to toggle a class on an element on click, use the classList.toggle method.

App.js
event.currentTarget.classList.toggle('my-class-1', 'my-class-2');

The classList.toggle method removes an existing class from the element if the class is present. Otherwise, it adds the class to the element.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.