JIYIK CN >

Find all elements by className in React:

1. Use getElementsByClassNamethe method to get all elements with a specific class.
2. Place the call to this method useEffect()in a hook.

import {useEffect} from 'react';

const App = () => {
  useEffect(() => {
    const allWithClass = Array.from(
      document.getElementsByClassName('example')
    );
    console.log(allWithClass);
  }, []);

  return (
    <div>
      <div>
        <h2 className="example">Alice</h2>
        <h2 className="example">Bob</h2>
        <h2 className="example">Carl</h2>
      </div>
    </div>
  );
};

export default App;

We pass an empty dependenciesarray to useEffectthe hook, so it will only run when the component mounts.

We use document.getElementsByClassNamethe method to select all elements on the page that have the example class.

Find all elements by class name in React using querySelectorAll

However, we can also use document.querySelectorAllthe method to which we can pass a selector instead of just a class name.

import {useEffect} from 'react';

const App = () => {
  useEffect(() => {
    const allWithClass = Array.from(
      document.querySelectorAll('h2.example')
    );
    console.log(allWithClass);
  }, []);

  return (
    <div>
      <div>
        <h2 className="example">Alice</h2>
        <h2 className="example">Bob</h2>
        <h2 className="example">Carl</h2>
      </div>
    </div>
  );
};

export default App;

We pass a selector to querySelectorAllthe method. The example above selects all h2 elements on the page that have a class of example.

We convert the collection to an array using Array.fromthe method. However, this may not be necessary for your use case.

We can iterate over an array of elements and perform actions on each element. Below is an example that changes the background color of each h2 element that has the example class.

import {useEffect} from 'react';

const App = () => {
  useEffect(() => {
    const allWithClass = Array.from(
      document.querySelectorAll('h2.example')
    );
    console.log(allWithClass);

    allWithClass.forEach(element => {
      element.style.backgroundColor = 'salmon';
    });
  }, []);

  return (
    <div>
      <div>
        <h2 className="example">Alice</h2>
        <h2 className="example">Bob</h2>
        <h2 className="example">Carl</h2>
      </div>
    </div>
  );
};

export default App;