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 div
s 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?
I created something that does the same thing. I extracted your code and made a component. now the state lives inside the component and will not affect others.
live demo
component
css file, I didn’t have the same classes so I created mine.
now you can use it wherever you want for multiple times