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

Question

[Devero97]

У меня есть аккордион. Передаю данные в массиве. При клике на любую кнопку открываются все подсказки. Как можно передать правильно index в функцию и вызвать только на определенную кнопку?

import { useRef, useState } from "react";

export const Accordion = ({ accordionList }) => {
  const [active, setActive] = useState(false);
  const [height, setHeight] = useState("0px");
  const [rotate, setRotate] = useState("transform duration-700 ease");

  const contentSpace = useRef<HTMLDivElement>(null);

  function toggleAccordion() {
    setActive((prevState) => !prevState);
    setHeight(active ? "0px" : `${contentSpace.current?.scrollHeight || 0}px`);
    setRotate(
      active
        ? "transform duration-700 ease"
        : "transform duration-700 ease rotate-180"
    );
  }

  return (
    <>
      <div className="mx-auto  flex max-w-7xl flex-col px-4 pb-8 sm:px-8 sm:pb-12">
        <div className="rounded-lg border-t bg-white shadow">
          {accordionList.map((item, index) => (
            <div>
              <button
                key={index}
                className="box-border flex w-full  cursor-pointer appearance-none items-center justify-between px-4 py-4 shadow  focus:outline-none sm:px-6"
                onClick={toggleAccordion}
              >
                <p className="text-base font-medium leading-6">{item.title}</p>
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  className={`${rotate} h-5 w-5 text-black`}
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke="currentColor"
                  stroke-width="2"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    d="M5 15l7-7 7 7"
                  />
                </svg>
              </button>
              <div
                ref={contentSpace}
                style={{ maxHeight: `${height}` }}
                className="transition-max-height overflow-auto overflow-y-hidden   duration-700 ease-in-out "
              >
                <div className="py-3  px-4  sm:px-6">{item.content}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </>
  );
};

Answer 1

[Александр Шипин]

Пример решения по аккордиону

Comments

[Devero97]

Мне бы поправить мое решение, не хотелось бы скачивать другой вариант

[Александр Шипин]

Devero97, пожалуйста, я вам предоставил решение, можете брать его за основу, разобраться, как работает, и уже на основе примера реализовать ваше решение.
К тому же, там есть ссылочка, называется "Edit on CodeSandbox", чтобы посмотреть на пример в живую, увидев его код (для тех, кто не любит скачивать)

Answer 2

[Иван Дербенченко]

Думаю тут напрашивается отдельный компонент Accordion со своим состоянием и обработчиком клика, и проблема решиться