👌

無理なく始めるゆるっとReact #26 TODOアプリの作成② リストの表示

2 min read

TODOリストの表示

前回作成したdata.jsonaxiosを利用して取得して表示します。
コードは以下のとおりです。

App.js
import React, { useState, useEffect } from 'react';
import axios from 'axios';

const todoDataUrl = 'http://localhost:3100/todos';

function App() {
  const [todoList, setTodoList] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      const response = await axios.get(todoDataUrl);
      setTodoList(response.data);
    };
    fetchData();
  }, []);
  return (
    <>
      <h1>TODO List</h1>
      <ul>
        {todoList.map((todo) => (
          <li key={todo.id}>
            {todo.content}({todo.done ? '完了' : '未完了'})
          </li>
        ))}
      </ul>
    </>
  );
}

import

useStateuseEffectが利用できるようにimportします。
さらにaxiosが利用できるようにaxiosもimportしておきます。

App.js
import React, { useState, useEffect } from 'react';
import axios from 'axios';

axiosで通信する先を定義

json-serverを利用して、ローカルにサーバーを作りました。
コマンドを打ったポート先のURLとdata.jsonに定義したデータ配列の名前を組み合わせたローカルホストURLを定義します。

App.js
const todoDataUrl = 'http://localhost:3100/todos';

App()の中に処理を記述

大きく分けて3つ記述を追加します。

  • useState()による状態と状態を更新するための関数の定義
  • useEffct()でマウント後に実行する処理
  • return()の中に取得したデータを表示する処理

表示は以下のようになります。

filter()を使って未完了と完了を分けて表示する

filter関数を使って未完了のリストと完了のリストを分けて表示されるようにします。

App.js
const inCompletedList = todoList.filter((todo) => {
  return !todo.done;
});

const completedList = todoList.filter((todo) => {
  return todo.done;
});

それぞれ変数を定義してtodoListからfilter()を使って新しい配列を作成します。
あとはreturn()の中に記述map()を使って展開します。

App.js
<h2>未完了TODO</h2>
<ul>
  {inCompletedList.map((todo) => (
    <li key={todo.id}>
      {todo.content}({todo.done ? '完了' : '未完了'})
    </li>
  ))}
</ul>

<h2>完了TODO</h2>
<ul>
  {completedList.map((todo) => (
    <li key={todo.id}>
      {todo.content}({todo.done ? '完了' : '未完了'})
    </li>
  ))}
</ul>

Discussion

ログインするとコメントできます