Как для сделать так чтобы при нажатии на определенную кнопку появлялся контент только для нее в React?

Question

[PePorMAty]

У меня есть n-e число кнопок, но при нажатии на любую из них контент появляется под каждой из кнопок, а мне надо сделать так, чтобы контент появлялся только под определенной кнопкой. Остальные кнопки не должны открываться в этот момент.

import React, { useRef } from "react";
import s from "./Shop.module.css";
import { useState } from "react";

export const Shop = () => {
  const card = [
    {
      name: "Бренды",
      cat: ["Adidas", "Nike"],
      show: false,
      id: 1,
    },
    {
      name: "Размер",
      cat: ["43", "43,5"],
      show: false,
      id: 2,
    },
    {
      name: "Тип",
      cat: ["Кроссовки", "Кеды"],
      show: false,
      id: 3,
    },
  ];
  const [active, setActive] = useState(null);
  const handleToggle = () => {
    setActive(!active);
  };
  return (
    <div className={s.container}>
      <div className={s.brandInner}>
        {card.map((i, index) => {
          return (
            <div className={s.brandCard} key={i.id}>
              <button className={`${s.brandBtn}`} onClick={handleToggle}>
                {i.name}
              </button>
              <div className={`${s.openCard} ${active ? "" : `${s.dNone}`}`}>
                <ul className={s.brandList}>
                  {i.cat.map((elem) => {
                    return (
                      <li key={elem} className={s.brandItem}>
                        {elem}
                      </li>
                    );
                  })}
                </ul>
                <button className={s.brandOpenBtn}>Применить</button>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
};

Comments

[fant0m121]

Самый просто вариант в вашем случае хранить переменной active id выбранной карточки, и в функцию handleToggle передавать id карточки на которой эта кнопка отображена. Ну и нужно не забыть поменять условие отображения с
active ? "" : `${s.dNone}` на active === i.id ? "" : `${s.dNone}`

Answer 1

[Andrey Vasilev]

const handleToggle = (id) => {
    setActive(id);
  };

<button className={`${s.brandBtn}`} onClick={handleToggle(i.id)}>
     {i.name}
</button>

<div className={active === i.id ? "" : `${s.dNone}`}>