【React】アコーディオンの作成方法(Q&Aアコーディオン)

React

Reactでアコーディオンを作成する方法を紹介します。
Q&Aを例にアコーディオンを実装します。

Reactでアコーディオンを作成する方法

import { AiOutlinePlus, AiOutlineMinus } from "react-icons/ai";
import { useState } from "react";

const FAQ = ({ faq }) => {
  const [showAnswer, setShowAnswer] = useState(false);
  return (
    <div className="faq" onClick={() => setShowAnswer((prev) => !prev)}>
      <div>
        <h5 className="faq__question">{faq.question}</h5>
        <button className="faq__icon">
          {showAnswer ? <AiOutlineMinus /> : <AiOutlinePlus />}
        </button>
      </div>
      {showAnswer && <p className="faq__answer">{faq.answer}</p>}
    </div>
  );
};

export default FAQ;

React Iconsのプラスアイコンとマイナスアイコンを使っています。
React Iconsの使い方は簡単で以下が実装方法です。


開いているときと、閉じているときで状態管理をしたいので、
useStateを使います。

onClick={() => setShowAnswer((prev) => !prev)}

状態の切り替えはクリックイベントで前の状態を取得して、それを反転させます。

      <div>
        <h5 className="faq__question">{faq.question}</h5>
        <button className="faq__icon">
          {showAnswer ? <AiOutlineMinus /> : <AiOutlinePlus />}
        </button>
      </div>
      {showAnswer && <p className="faq__answer">{faq.answer}</p>}

あとは、状態の変数であるshowAnswerによって、表示するものを変更します。
アイコン部分は、プラスとマイナスで切り替えるので、三項演算子を使います。
答えの部分は表示か非表示かなので、&&2つで記述します。showAnswerがtrueのときのみ次が実行されるようになります。
三項演算子や&&がわからない場合は、以下の記事を参考にしてみてください。

React

Posted by devsakaso