如何在 React 中点击应用和删除类？

Question

How to apply and remove CSS classes on click of multiple div (which is rendered by array of items) in react?

<div 
  onClick={() => { setActiveDiv(`div${index}`) }}
  className={(activeDiv === `div${index}`) ? "activeFileName" : "inActiveFileName"}  
>
 {item?.name}
</div>

Answer 1

Here, you want to add 'activeFileName' on div when it's clicked and remove it when another div is clicked.

For that, you need indexing while creating div. Something like:

<div 
  data-index = {1}
  onClick={(evt) => { setActiveDiv(evt.target.getAttribute("data-index")}}
  className={(activeDiv === 1) ? "activeFileName" : "inActiveFileName"}  
>
  {item?.name}
</div>
<div 
  data-index = {2}
  onClick={(evt) => { setActiveDiv(evt.target.getAttribute("data-index")}}
  className={(activeDiv === 2) ? "activeFileName" : "inActiveFileName"}  
>
  {item?.name}
</div>

You can assign an index either dynamically using a map or some other logic.