Get the Class name of an element in React

Get the Class name of an element in React #

To get the class name of an element in React:

Set the ref prop on the element or use an event handler function.
If using a ref, access the class name as ref.current.className.
If using an event handler, access the class name as event.currentTarget.className.

App.js

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

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

  useEffect(() => {
    console.log('className 👉️', ref.current.className);

    // 👇️ check if element contains class
    if (ref.current.classList.contains('my-class')) {
      console.log('Element contains class');
    } else {
      console.log('Element does NOT contain class');
    }
  }, []);

  const handleClick = event => {
    console.log('className 👉️', event.currentTarget.className);

    // 👇️ check if element contains class
    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>
  );
}

The code snippet shows how to get the class name of an element when the component mounts, or when an event is triggered.

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.

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.

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.

App.js

Copied!
useEffect(() => {
  console.log('className 👉️', ref.current.className);

  // 👇️ check if element contains class
  if (ref.current.classList.contains('my-class')) {
    console.log('Element contains class');
  } else {
    console.log('Element does NOT contain class');
  }
}, []);

We used the className property to programmatically get the element's class name.

If you need to get the element's class name when an event is triggered, use event.currentTarget.className.

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

App.js

Copied!
const handleClick = event => {
  console.log('className 👉️', event.currentTarget.className);

  // 👇️ check if element contains class
  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).

This means that if you need to access the class name of the element that was actually clicked, not the one to which the event listener is attached, you would use the target property instead.

App.js

Copied!
const handleClick = event => {
  console.log('className 👉️', event.target.className);
};

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.

Get the Class name of an element in React

Get the Class name of an element in React #

Borislav Hadzhiev