Как добавлять класс одному блоку и удалять класс у остальных блоков?

Question

[DZHAMBUALT]

Здраствуйте! У меня есть родительский блок с несколькими < Item />. Мне нужно при нажатии на один из < Item /> добавлять этому блоку класс active, и при этом удалять класс active у других < Item />. Я не могу понять как это сделать.

РОДИТЕЛЬСКИЙ БЛОК

import Item from "./ITEM/Item";
export default function Group() {
  return (
    <ul className="group">
       <Item text="myItem1"/>
       <Item text="myItem2"/>
       <Item text="myItem3"/>
       <Item text="myItem4"/>
       <Item text="myItem5"/>
       <Item text="myItem6">
    </ul>
  );
}

ITEM БЛОК

export default function Item({text}) {
  return (
    <li className={`item`} onClick={() => {}} >
      <h2>{text}</h2>
    </li>
  );
}

Comments

[0xD34F]

Как осуществить передачу данных между компонентами React?

[DZHAMBUALT]

0xD34F Как передавать значения между компонентами я знаю. Я знаю как добавлять класс active, но как при этом удалять класс у остальных < Item /> я не могу понять

[0xD34F]

DZHAMBUALT, попробуйте посмотреть чуть дальше заголовка вопроса (если что, сочинял его не я; при вставке ссылки на вопрос его заголовок подтягивается автоматически). Говорите, что знаете, как добавить класс? - нет, не знаете. Знали бы - знали бы как удалить, это одно и то же.

[DZHAMBUALT]

0xD34F, Спасибо. Я добавлял класс с помощью состояния внутри дочернего компонента и менял его на active при клике на дочерний компонент.