Get the Class name of an element in React

# Table of Contents

# Get the Class name of an element using `event.target` in React

To get the class name of an element:

Set the onClick prop on the element to an event handler function.
Access the element's class name as event.currentTarget.className.

App.js

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

    if (event.currentTarget.classList.contains('my-class')) {
      console.log('Element contains class');
    } else {
      console.log('Element does NOT contain class');
    }
  };

  return (
    <div>
      <div
        className="my-class second-class"
        onClick={handleClick}
      >
        bobbyhadz.com
      </div>
    </div>
  );
}

react get class name of element event target

The code for this article is available on GitHub

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

  if (event.currentTarget.classList.contains('my-class')) {
    console.log('Element contains class');
  } else {
    console.log('Element does NOT contain class');
  }
};

We can access the class name of the element in the handleClick function via the event.currentTarget.className property.

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

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

# Get the Class name of an element using a `ref` in React

This is a two-step process:

Set the ref prop on the element.
Access the class name as ref.current.className.

App.js

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

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

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

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

  return (
    <div>
      <div className="my-class second-class" ref={ref}>
        bobbyhadz.com
      </div>
    </div>
  );
}

get class name of element using ref

The code for this article is available on GitHub

The code sample uses a ref to get the class name of an element when the component mounts.

The useRef() hook can be passed an initial value as an argument.

App.js

Copied!
const ref = useRef(null);

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.

App.js

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

  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 last step is to use the className property to programmatically get the element's class name.

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

# Table of Contents

# Get the Class name of an element using event.target in React

# Get the Class name of an element using a ref in React

Borislav Hadzhiev

# Get the Class name of an element using `event.target` in React

# Get the Class name of an element using a `ref` in React