Check if an Element contains a class in React

# Check if an Element contains a class in React

To check if an element contains a class in React:

Set the ref prop on the element.
Use the classList.contains() method on the ref object to check if the class exists.
The method returns true if the element's class list contains the class.

App.js

Copied!
import {useEffect, useRef} from 'react';

export default function App() {
  const ref = useRef(null);

  // 👇️ Check if the element contains a class on mount
  useEffect(() => {
    if (ref.current.classList.contains('my-class')) {
      console.log('Element contains class');
    } else {
      console.log('Element does NOT contain class');
    }
  }, []);

  // 👇️ Check if the element contains a class on click
  const handleClick = event => {
    if (event.currentTarget.classList.contains('my-class')) {
      console.log('Element contains class');
    } else {
      console.log('Element does NOT contain class');
    }
  };

  return (
    <div>
      <div ref={ref} className="my-class" onClick={handleClick}>
        Hello world
      </div>
    </div>
  );
}

check if element has class

The code for this article is available on GitHub

The code snippet shows how to check if an element contains a class when the component is mounted or when the element is clicked.

The useRef() hook can be passed an initial value as an argument. The hook returns a mutable ref object whose .current property is initialized to the passed argument.

App.js

Copied!
const ref = useRef(null);

Notice that we have to access the current property on the ref object to get access to the div element on which we set the ref prop.

App.js

Copied!
// 👇️ Check if the element contains a class on mount
useEffect(() => {
  if (ref.current.classList.contains('my-class')) {
    console.log('Element contains class');
  } else {
    console.log('Element does NOT contain class');
  }
}, []);

The code for this article is available on GitHub

When we pass a ref prop to an element, e.g. <div ref={myRef} />, React sets the .current property of the ref object to the corresponding DOM node.

We passed an empty dependencies array to the useEffect hook, so it's only going to run when the component mounts.

The classList.contains method returns a boolean value - true if the class is contained in the element's class list and false otherwise.

If you need to add or remove a class on click, check out the following tutorial.

If you need to check if an element contains a class on click, set the onClick prop on the element.

# Check if an element contains a class on click in React.js

To check if an element contains a class on click in React.js:

Set the onClick prop on the element.
Use the classList.contains() method on the event.target object to check if the element contains the class.

App.js

Copied!
import {useRef} from 'react';

export default function App() {
  const ref = useRef(null);

  // 👇️ Check if an element contains class on click
  const handleClick = event => {
    if (event.currentTarget.classList.contains('my-class')) {
      console.log('Element contains class');
    } else {
      console.log('Element does NOT contain class');
    }
  };

  return (
    <div>
      <div
        ref={ref}
        className="my-class"
        onClick={handleClick}
        style={{backgroundColor: 'lime'}}
      >
        bobbyhadz.com
      </div>
    </div>
  );
}

react check if element contains class on click

The code for this article is available on GitHub

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

App.js

Copied!
const handleClick = event => {
  if (event.currentTarget.classList.contains('my-class')) {
    console.log('Element contains class');
  } else {
    console.log('Element does NOT contain class');
  }
};

Notice that we used the currentTarget property on the event because we want to access the element that the event listener is attached to.

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

In our handleClick method, we again use the classList.contains() method to check if the element contains the class.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

Check if an Element contains a class in React

# Check if an Element contains a class in React

# Check if an element contains a class on click in React.js

Borislav Hadzhiev