Add or Remove a Class on click in React

avatar

Borislav Hadzhiev

Last updated: Jul 25, 2022

banner

Photo from Unsplash

Add or Remove a Class on click in React #

To add or remove a class on click in React:

  1. Set the onClick prop on the element.
  2. Store the active state in a state variable.
  3. Conditionally add the class using the ternary operator.
App.js
import {useState} from 'react'; import './App.css'; export default function App() { const [isActive, setIsActive] = useState(false); const handleClick = event => { // 👇️ toggle isActive state on click setIsActive(current => !current); }; return ( <div> <button className={isActive ? 'bg-salmon' : ''} onClick={handleClick}> Click </button> </div> ); }

And here is the css for the example.

App.css
.bg-salmon { background-color: salmon; color: white; }

add remove class on click

Alternatively, you can programmatically add or remove a class using the event object.

To add or remove a class on click in React:

  1. Set the onClick prop on the element.
  2. Access the DOM element as event.currentTarget.
  3. Use the classList.add() or classList.remove() methods.
App.js
import './App.css'; export default function App() { const handleClick = event => { // 👇️ toggle class on click event.currentTarget.classList.toggle('bg-salmon'); // 👇️ add class on click // event.currentTarget.classList.add('bg-salmon'); // 👇️ remove class on click // event.currentTarget.classList.remove('bg-salmon'); }; return ( <div> <button onClick={handleClick}>Click</button> </div> ); }
We set the onClick prop on the button element, so every time it is clicked, the handleClick function is invoked.

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

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

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

The example shows how to toggle a class using the classList.toggle method.

App.js
event.currentTarget.classList.toggle('bg-salmon');

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

You can pass as many classes to the toggle() method as necessary.

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

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

App.js
event.currentTarget.classList.add( 'bg-salmon', 'my-class-2', 'my-class-3', );

The classList.add() method won't add the class a second time if it's already present on the element.

If you need to remove a class from an element, use the classList.remove method.

App.js
event.currentTarget.classList.remove( 'bg-salmon', 'my-class-2', 'my-class-3', );

The classList.remove() method ignores the class if it's not present on the element, otherwise it removes the class from the element's class list.

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.