JIYIK CN >

To toggle a class on click in React:

1. Sets the onClick attribute on the element.
2. Store the activity state in a state variable.
3. Use the ternary operator to conditionally add a class.

import {useState} from 'react';
import './App.css';

export default function App() {
  const [isActive, setIsActive] = useState(false);

  const handleClick = event => {
    // 👇️ toggle isActive state variable
    setIsActive(current => !current);
  };

  return (
    <div>
      <button className={isActive ? 'bg-salmon' : ''} onClick={handleClick}>
        Click
      </button>
    </div>
  );
}

Here is an example of css.

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

We initialize the state of the variable to falseuseState in the hook .isActive

We set the onClick attribute on the button element , so every click will call the handleClick function.

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

We use the ternary operator to conditionally add the class to the element.

<button className={isActive ? 'bg-salmon' : ''} onClick={handleClick}>
  Click
</button>

The ternary operator is if/elsevery similar to the statement.

It checks if the value to the left of the question mark is true, if so then the operator returns the value to the left of the colon, otherwise it returns the value to the right.

In other words, if isActivethe variable stores a truthy value, we add the bg-salmon class to the element, otherwise we return an empty string.

Alternatively, we can use classList.toggle()the method to toggle a class on an element.

import './App.css';

export default function App() {
  const handleClick = event => {

    // 👇️ toggle class on click
    event.currentTarget.classList.toggle('bg-salmon');
  };

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

We can currentTargetaccess the element through the event object's property.

The event's currentTargetproperty gives us access to the element to which the event listener is attached.

And the target property of the event gives us a reference to the element (possibly a descendant) that triggered the event.

If the class exists, classList.togglethe method removes the existing class from the element. Otherwise, it adds the class to the element.