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

Question

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

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

Но.

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

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

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

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

Весь код:

spoiler

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]);
  }

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

Comments

[Алексей]

Ну вы же сами ответили на свой вопрос, что так происходит, потому что favAct один для всех товаров. Ну так и сделайте отдельный компонент товара, т.е. вынесите все, что в map в отдельный компонент и туда же перенесите добавление в избранное.
Но это все актуально только для вашего случая, т.к. обычно данные приходят с бека и атрибут помечен товар как избранный или нет также будет приходить оттуда, а не храниться только на фронте и изменяться это состояние также будет через запросы на сервер.