Массив пустой, хотя я добавляю в него ID. Что не так?

Создаю модальное окно и столкнулся с проблемой. Описываю ниже.

один из объектом item массива json[0]:
spoiler
{
      id: 4,
      image: "../img/long__loaf.png",
      quantity: "В наличии 3 шт",
      name: "Батон, 400г",
      price: "79 руб",
      basket: "В корзину",
      descr:
        "Батон приготовлен из пшеничной муки высшего сорта, дрожжей и подсолнечного масла. Классический батон в удобной нарезке. При изготовлении батона производитель не использует ни ускорители, ни хлебопекарные смеси.",
    }

Тут я нахожу нужный item(item у которого name равен meaining), сама строчка с помощью которой нахожу нужный мне item:
const descriptionObj = [json[0].find((item) => item.name === meaning)];

item - это объект с разными свойствами.
Тут я прохожусь по этому объекту map-ом и передаю данные в компонент Universal:
const Arr = descriptionObj.map((item) => ( <Universal item={item} id={item.id} active={(id) => active(id)} favAct={favAct}/>


И сам компонент Universal:
spoiler
import React, { useState } from "react";
import styles from "../Drawer.module.scss";

function Universal({ item, active, favAct, 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={
              !favAct ? "../img/favoritedActive.png" : "../img/favorited.png"
            }
            onClick={active}
            width="50px"
            height="50px"
          />
        </div>
        <div>{item.descr}</div>
      </div>
    </div>
  );
}

export default Universal;

А это все те пропсы, что я передаю в Universal:
spoiler
const newArr = [];
  const [favAct, setFavAct] = useState([]);

  const active = (id) => {
    setFavAct((prev) => [...prev, id]);
  };


Проблема у меня следующая:
при нажатии в компоненте Universal на тег img, у которого есть onClick={active} по нажатии которого должен быть добавлен id объекта в массив favAct. Т.е. вот так:
const [favAct, setFavAct] = useState([]);

  const active = (id) => {
    setFavAct((prev) => [...prev, id]);
  };

Но этого не происходит и массив пустой.
Что я делаю не так? Помогите, пожалуйста.
  • Вопрос задан
  • 92 просмотра
Пригласить эксперта
Ответы на вопрос 1
@slide13
frontend/web-developer
У вас в active ожидается, что id будет передаваться из компонента Universal, т.е. там должно быть onClick={() => active(id)}

но id можно передать и сразу, тогда в Universal ничего править не надо, а внутри map сделать active={() => active(item.id)}
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Else Ростов-на-Дону
от 150 000 до 200 000 ₽
OWNR SOLUTIONS Нижний Новгород
от 150 000 до 250 000 ₽
19 июн. 2024, в 06:58
15000 руб./за проект
19 июн. 2024, в 01:11
7000 руб./за проект
18 июн. 2024, в 23:10
15000 руб./за проект