[React] 리액트로 아코디언 카드 만들기

    const [faqList, setFaqList] = useState([
        {
            index: 0,
            title: 'QR코드란?',
            content:
                'Lorem ipsum dolor sit amet consectetur adipisicing. Quasi, hic? ',
            open: false,
        },
        {
            index: 1,
            title: 'QR 코드는 어떤 곳에서 사용하나요?',
            content:
                'Lorem ipsum dolor sit amet consectetur adipisicing. Quasi, hic? ',
            open: false,
        },
        {
            index: 2,
            title: '몇가지의 QR코드 유형이 있나요?',
            content:
                'Lorem ipsum dolor sit amet consectetur adipisicing. Quasi, hic? ',
            open: false,
        },
    ]);

    const openAndCloseBtn = (index: number) => {
        let newFaqList = faqList.map((item) =>
            item.index === index
                ? { ...item, open: !item.open }
                : { ...item, open: false }
        );
        setFaqList(newFaqList);
    };

    return (
      <div>
          <h1 >자주 묻는 질문</h1>
          </h4>
          {faqList.map((item, index) => {
            return (
               <div key={item.index}>
                  <div>
                     <h2>{item.title}</h2>
                     <button onClick={() => 
                      openAndCloseBtn(index)}>
                        {item.open ? "∧" :"∨"}
                     </button>
                  </div>
                  {item.open && <div>{item.content}</div>}
               </div>
              );
          })}
      </div>
  );