Чтобы переключить отдельный элемент с помощью mapв React, вы можете использовать разные подходы. Вот несколько способов:

Метод 1: использование массива логических значений

1. Создайте массив логических значений, чтобы отслеживать состояние переключения для каждого элемента. Например:

   const [toggleState, setToggleState] = useState(Array(items.length).fill(false));

2. Отобразите элементы с помощью функции mapи добавьте обработчик событий щелчка для переключения соответствующего элемента:

   {items.map((item, index) => (
   <div key={index} onClick={() => handleToggle(index)}>
   {item}
   </div>
   ))}

3. Реализуйте функцию handleToggleдля обновления массива состояний переключения:

   const handleToggle = (index) => {
   const newToggleState = [...toggleState];
   newToggleState[index] = !newToggleState[index];
   setToggleState(newToggleState);
   };

Метод 2: использование объекта для хранения состояния переключения

1. Создайте объект для хранения состояния переключения для каждого элемента. Например:

   const [toggleState, setToggleState] = useState({});

2. Отобразите элементы с помощью функции mapи добавьте обработчик событий щелчка для переключения соответствующего элемента:

   {items.map((item, index) => (
   <div key={index} onClick={() => handleToggle(item)}>
   {item}
   </div>
   ))}

3. Реализуйте функцию handleToggleдля обновления объекта состояния переключения:

   const handleToggle = (item) => {
   setToggleState((prevState) => ({
   ...prevState,
   }));
   };