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

@Константин345 · Регистрация: 17.09.2015

Студворк — интернет-сервис помощи студентам

Проблема в следующем: я создаю модальное окно, в котором есть иконка сердечка(черно-белая по умолчанию). При нажатии на черно-белое сердечко оно становится красным и теперь это как бы "любимый товар".

Но.

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

В этом фрагменте кода это происходит:

JavaScript
1
     <img src={favAct ? "../img/favoritedActive.png" : "../img/favorited.png"} onClick={active} />

Весь код:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
 const [boolean, setBoolean] = useState(false);
  const [meaning, setMeaning] = useState();
  const boolvalue = (event) => {
    setBoolean(!boolean);
    setMeaning(event.target.innerHTML);
  };
  const closed = () => {
    setBoolean(!boolean);
  };
  const [favAct, setFavAct] = useState(false);
  const active = () => {
    setFavAct(!favAct);
  };
  const newArr = [];
  if (meaning != undefined) {
    const descriptionObj = [json[0].find((item) => item.name === meaning)];
    const Arr = descriptionObj.map((item) => (
      <div className={styles.doubleBlock}>
        <div className={styles.leftBlock_one}>
          <img src={item.image} />
        </div>
        <div className={styles.rightBlock_one}>
          <div>{item.name}</div>
          <div className={styles.toBasket}>
            <div>{item.price}</div>
            <button>В корзину</button>
            <img
              src={
                favAct ? "../img/favoritedActive.png" : "../img/favorited.png"
              }
              onClick={active}
              width="50px"
              height="50px"
            />
          </div>
          <div>{item.descr}</div>
        </div>
      </div>
    ));
    newArr.push(Arr[0]);
  }

Спасибо за помощь!

Добавлено через 3 минуты
И так происходит потому, что меняется значение переменной favAct, которая является глобальной как бы.
А мне же нужно менять значения для каждого отдельного случая, а не для всех случаев.

@Ovederax · 26.03.2023, 09:56

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
const ProductItem = (props) => {
  const { item, isFavorite, toggleFavorite } = props;
 
  const onClick = () => {
    toggleFavorite(item.id);
  };
 
  return (
    <div className={styles.doubleBlock}>
      <div className={styles.leftBlock_one}>
        <img src={item.image} />
      </div>
      <div className={styles.rightBlock_one}>
        <div>{item.name}</div>
        <div className={styles.toBasket}>
          <div>{item.price}</div>
          <button>В корзину</button>
          <img
            src={
              isFavorite
                ? 'https://www.pxpng.com/public/uploads/preview/-11608629581ajmxk924pw.png'
                : 'https://e7.pngegg.com/pngimages/82/6/png-clipart-dislike-dislike.png'
            }
            onClick={onClick}
            width="50px"
            height="50px"
          />
        </div>
        <div>{item.descr}</div>
      </div>
    </div>
  );
};
 
export default function App() {
  const [favoriteMap, setFavoriteMap] = useState({});
 
  const toggleFavorite = (id: number) => {
    const clone = { ...favoriteMap };
    if (clone[id]) {
      clone[id] = false;
    } else {
      clone[id] = true;
    }
    setFavoriteMap(clone);
  };
 
  const json = [
    {
      id: 0,
      name: '123',
      price: '50р',
    },
    {
      id: 1,
      name: '256',
      price: '124р',
    },
  ];
 
  const arr = json.map((item) => (
    <ProductItem
      item={item}
      isFavorite={favoriteMap[item.id]}
      toggleFavorite={toggleFavorite}
    />
  ));
 
  return arr;
}

Добавлено через 11 минут
вариант с массивом вместо объекта

JavaScript
1
2
3
4
5
6
7
8
9
10
11
  const [favorites, setFavorites] = useState([]);
 
  const toggleFavorite = (id: number) => {
    if (favorites.findIndex((it) => it == id) !== -1) {
      setFavorites(favorites.filter((it) => it !== id));
    } else {
      setFavorites(favorites.concat(id));
    }
  };
  // ...
  isFavorite={favorites.findIndex((it) => it == item.id) !== -1}

@Константин345 · 26.03.2023, 12:57 **[ТС]**

Ovederax, Спасибо! Работает!

Новые блоги и статьи Все статьи Все блоги /
Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .
Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .

@Константин345 1 / 4 / 5 Регистрация: 17.09.2015 Сообщений: 194
	26.03.2023, 12:57 [ТС]
	Ovederax, Спасибо! Работает! 0

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

Решение