Change the Style of an element on click in React

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.

Copied!
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>
  );
}

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.

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

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

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

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.

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.

Copied!
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>
  );
}

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

Copied!
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>
  );
}

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

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

Copied!
// 👇️ 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.

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