Как выделить активный элемент таблицы состоящей из div элементов?

Question

[MarEeeeee]

Всем привет. Имеется табличка с неоторыми данными. По нажатию на поле требуется его выделить, как сделать так, чтобы одномоменто могло быть выделено лишь одно поле?

function FirstWindowItems({item}) {
    function handleClick(item){
        // e.preventDefault();
        console.log(item.FIO, item.position);
      }




    return(
        <div className = "window__items" onClick = {() =>handleClick(item)}>
            {/* <div className = "window__item window__name">{item.id}</div> */}
            <div className = "window__item window__name">{item.FIO}</div>
            <div className = "window__item window__name">{item.position}</div>
            <div className = "window__item window__name">{item.birthDay}</div>
            <div className = "window__item window__name">
                {
                    item.sex ?
                        "М" : "Ж"                    
                }            
            </div>
            <div className = "window__item window__name">{
            item.fired ?
                "Уволен":"Работает"
            }
            </div>            
        </div>
    )
}

понимаю, что это нужно сделать внутри handleClick, но если просто добавлять стили на блок, то в итоге выделяется больше одного элемента

Answer 1

[0xD34F]

В родительском компоненте:

const [ active, setActive ] = useState(null);

{items.map((n, i) => (
  <FirstWindowItems
    item={n}
    isActive={active === i}
    onClick={() => setActive(i)}
  />
))}

В FirstWindowItems:

function FirstWindowItems({ item, isActive, onClick }) {
  return (
    <div className={`window__items ${isActive ? 'active' : ''}`} onClick={onClick}>
      ...

.window__items.active {
  здесь стили для активного элемента
}