How to change color of div that’s selected and others be same?

I have a dynamic array of divs representing numbered lists i.e.

Array.from({length: data.length}).map((item,value)=>(
     <div onClick={()=>sliderRef.current.slickGoTo(index)}></div>
))

I have 2 classes, dot which is a gray color, active which is red. How can change the color of div to red which is clicked/selected and the rest be gray?

Answer

You use React, right? You could write a Component instead of your div that should contain a state variable of isClicked and a function handleClick. HandleClick can then set isClicked to true. Then you can have conditional styling, like:

<div style={{backgroundColor: isClicked ? "red" : "gray"}} />