Is it possible to target a className using a useState hook?

Question

Is it possible to target a className in a useState hook? target.className == "test" is what I am looking at specifically. Is it possible to look for a class and if that class is active hide/show another div page element?

I may be way off with this but, looking for suggestions.

// Click tracking of className "test"
const [isSelected, setIsSelected] = useState(true)
const selectToggle = (target.className == "test") =>
  setIsSelected({ ...isSelected, [test]: !isSelected[test] })

Answer 1

You can track element with its reference using useRef , check the console which will log the element it tracks:

import React, { useState, useRef, useEffect } from 'react';
import ReactDOM from 'react-dom';

const App = () => {
  const [isSelected, setIsSelected] = useState(true);
  const elementRef = useRef();

  useEffect(() => {
    console.log(elementRef.current);
  });

  const toggle = () => setIsSelected(s => !s);

  return (
    <>
      {isSelected && <div ref={elementRef}>Im Tracked</div>}
      <button onClick={toggle}>{`Click to ${
        isSelected ? 'disable' : 'enable'
      }`}</button>
    </>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));