Add or Remove a Class on click in React

avatar

Borislav Hadzhiev

Wed Apr 27 20222 min read

banner

Photo by Hannah Busing

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 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 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.

Use the search field on my Home Page to filter through my more than 1,000 articles.