Как поменять стили для одного элемента массива по клику?

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

Ниже приведен пример решения задачи на React:

import React, { useState } from "react";

const App = () => {
  // Создаем массив элементов
  const [items, setItems] = useState([
    { id: 1, text: "Элемент 1", active: false },
    { id: 2, text: "Элемент 2", active: false },
    { id: 3, text: "Элемент 3", active: false },
  ]);

  // Функция для обработки клика на элемент
  const handleClick = (itemId) => {
    // Получаем новый массив, в котором изменяем состояние заданного элемента
    const newItems = items.map((item) =>
      item.id === itemId ? { ...item, active: !item.active } : item
    );

    // Обновляем состояние массива элементов
    setItems(newItems);
  };

  return (
    <div>
      {items.map((item) => (
        <div
          key={item.id}
          onClick={() => handleClick(item.id)}
          style={{
            backgroundColor: item.active ? "blue" : "white", // Применяем нужные стили в зависимости от состояния
            color: item.active ? "white" : "black",
            padding: "10px",
            marginBottom: "10px",
            cursor: "pointer",
          }}
        >
          {item.text}
        </div>
      ))}
    </div>
  );
};

export default App;

В данном примере мы создали состояние items, которое представляет собой массив объектов с полями id, text и active. При клике на элемент массива, состояние active для данного элемента меняется на противоположное значение, что позволяет нам изменить стили этого элемента.

Метод map используется для создания нового массива элементов, в котором заменяем состояние нужного элемента. Затем мы обновляем состояние массива элементов путем вызова функции setItems и передачи ей нового массива.

В методе render мы проходим по массиву элементов и создаем для каждого элемента отдельный div. В зависимости от состояния active элемента, мы применяем нужные стили, такие как цвет фона, цвет текста и другие.

При клике на элемент мы вызываем функцию handleClick, которая передает индекс данного элемента в функцию map. Внутри функции map мы проверяем, совпадает ли id элемента с переданным itemId и в зависимости от этого меняем значение active.

Надеюсь, этот пример поможет вам понять, как поменять стили для одного элемента массива при клике в React.