How to Check if an Element contains a class in React

The topic of today’s article is how to check if an element contains a class in React. Some of the ways mentioned in the article include using the useRef hook or the event.target method

How to check if an Element contains a class in React

Using the useRef hook

In essence, useRef is similar to a “box” in that it stores an element’s values using the.current attribute. Your primary use of the ref is to access the DOM. React will change its current property to the corresponding DOM node whenever you pass a ref object with the syntax “div ref = myRef />.”

You can view the element’s class values ​​by giving the element a ref, then using the ref current method to get the class value to check.

Code:

import { useEffect, useRef } from 'react';

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

    useEffect(() => {
        if (ref.current.classList.contains('container')) {
            console.log('Element contains class container');
        } else {
            console.log('Element does NOT contain class container');
        }
    }, []);

    return (
        <div>
            <div ref={ref} className="container">
                LearnShareIT
            </div>
        </div>
    );
}

Output:

By accessing the element’s class list by accessing the ref, we can get the element’s class values. To check if an Element contains a class, we use the classList.contains() method to be able to check if the class list has the value of the checked class; if so, it will return true and vice versa. As in the above example, the div has a container class, so the return value will be accurate.

Using event.target method

In this way, we also use classList.contains() to check whether the class is in the classlist of the element, but the way to access the classList will be different from the previous method. We will use event.target to get the classlist of the element. For this, we need an event to run this function. Let’s see the example below to understand how we will do it.

Code:

export default function App() {
    const handleClick = (event) => {
        if (event.target.classList.contains("container")) {
            console.log("Element contains class container");
        } else {
            console.log("Element does NOT contain class container");
        }
    };

    return (
        <div>
            <button className="container" onClick={handleClick}>
                LearnShareIT
            </button>
        </div>
    );
}

Output:

The difference in this approach with using useRef is that we will use a click event on the element to check if an element contains a class function and print it to the console. In the above example, we will assign it to a button, and when we press it, we will check the classname of the element clicked on it. Wish you success with the methods mentioned in the article

Summary

To sum up, the article showed you how to check if an element contains a class in React. However, I recommend using the useRef hook to be able to check classes without depending on events happening on the site

Nathaniel Kirk

Hi, my name’s Nathaniel Kirk. I’m interested in learning and sharing knowledge about programming languages. My strengths are C, C++, Python, HTML, CSS, Javascript, and Reactjs. If you have difficulty with them, don’t worry. I’m here to support you.

---

Name of the university: PTIT
Major: IT
Programming Languages: C, C++, Python, HTML, CSS, Javascript, Reactjs