【React】アコーディオンリストの作成

はじめに

Reactで簡単なアコーディオンリストを作成するための実装例を紹介します。

作るもの

以下の画像のような、ボタンをクリックすると表示、非表示を切り替えることができるようなUIです。

実装

・以下のコマンドで、Reactの雛形を作成する。

terminal

npx create-react-app プロジェクト名

・作成されたApp.js、App.cssファイルを以下のように置き換える。

App.jsimport { useState } from 'react';

import './App.css';

function App() {
  const [selected, setSelected] = useState(null)

  const toggle = (i) => {
    if (selected === i) {
      return setSelected(null)
    }
    setSelected(i)
  } 

  return (
    <div className="wrapper">
      <div className="accordion">
        {data.map((item, i) => 
          <div className="item">
            <div className='title' onClick={() => toggle(i)}>         
              <h2>{item.question}</h2>
              {/* 表示、非表示を切り替えるボタン */}
              <span>{selected === i ? "-" : "+"}</span>
            </div>
            <div 
              className={
                selected === i ? "content show" : "content"
              }
            >
              {item.answer}</div>
          </div>
        )}
      </div>
    </div>
  );
}

// サンプルデータ
const data = [
  {
    question: "Question 1",
    answer: 
      "Answer 1"
  },
  {
    question: "Question 2",
    answer:
      "Answer 2"
  },
  {
    question: "Question 3",
    answer:
      "Answer 3."
  },
  {
    question: "Question 4",
    answer:
      "Answer 4"
  },
]

export default App;

App.css

.wrapper {
  display: flex;
  height: 100vh;
  width: 100vw;
  justify-content: center;
  align-items: center;
}

.accordion {
  width: 500px;
}

.item {
  background: #f0ebe1;
  margin-bottom: 5px;
  padding: 10px, 20px;
}

.title {
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

.content {
  color: #8b7f75;
  max-height: 0;
  overflow: hidden;
  transition: all 0.5s cubic-bezier(0.1, 0.1);
}

.content.show {
  height: auto;
  max-height: 9999px;
  transition: all 0.5s cubic-bezier(1.0, 1.0);
}

・以下のコマンドでサーバーを起動する。

terminal

npm start

参考