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

Question

[Константин]

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

один из объектом 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]);
  };

Но этого не происходит и массив пустой.
Что я делаю не так? Помогите, пожалуйста.

Answer 1

[Алексей]

У вас в active ожидается, что id будет передаваться из компонента Universal, т.е. там должно быть onClick={() => active(id)}

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