How to efficiently toggle classes with multiple HTML elements across multiple files

I am toggling an arrow image whenever my div is clicked. I am controlling the state of the click with

const [toggleArrow, setToggleArrow] = useState(false)

My div has an onClick function that controls the state and toggles the faq-subject-toggle-arrow class that adds an image

<div className={`faq-subject ${toggleArrow ? 'faq-subject-toggle-arrow' : ''}`} onClick={() => {
  setToggleArrow(!toggleArrow)
}>

My problem is that I have 50 divs across multiple styles and don’t want to make 50 states to toggle one image.

Is there a more efficient solution for this with less code?

60 thoughts on “How to efficiently toggle classes with multiple HTML elements across multiple files”

  1. 577052 253294Oh my goodness! a amazing write-up dude. Thanks a whole lot Nonetheless We are experiencing trouble with ur rss . Do not know why Not able to sign up to it. Possibly there is anybody acquiring identical rss difficulty? Anyone who knows kindly respond. Thnkx 851892

    Reply