Как делать значение true/false только для выбранного элемента, а не для всех?

В React, чтобы управлять значением true/false только для выбранного элемента, а не для всех элементов, обычно используется состояние компонента.

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

const [isSelected, setIsSelected] = useState(false);

2. При рендеринге каждого элемента, установите атрибут, отвечающий за состояние выбранного элемента на основе значения переменной состояния isSelected. Например, можно использовать условное выражение для добавления класса "selected", когда isSelected равен true:

<div className={isSelected ? "selected" : ""} onClick={() => setIsSelected(!isSelected)}>Элемент</div>

3. Внутри обработчика события onClick для элемента можно изменить состояние isSelected, чтобы переключать его значение. В данном примере используется функция setIsSelected, передавая ей отрицание текущего значения isSelected через оператор !.

Таким образом, когда пользователь кликает на элемент, будет изменяться его состояние isSelected. Это позволяет управлять значением true/false только для выбранного элемента, а не для всех.

4. Если необходимо управлять состоянием выбранных элементов для нескольких элементов одновременно, можно использовать массив или объект для отслеживания состояния каждого элемента отдельно. Например, можно создать объект, где ключами являются уникальные идентификаторы элементов, а значениями - состояния выбранности. Обработчик onClick может быть изменен, чтобы обновлять соответствующее состояние элемента:

const [selectedItems, setSelectedItems] = useState({});

...

<div
  className={selectedItems[id] ? "selected" : ""}
  onClick={() => setSelectedItems(prevState => ({ ...prevState, [id]: !prevState[id] }))}>
  Элемент
</div>

Этот подход позволяет управлять состоянием выбранности каждого элемента отдельно.

Здесь была представлена основная концепция управления состоянием выбора элемента в React. Однако, реализация может изменяться в зависимости от контекста и требований проекта.