React (Typescript) を使ってデータを一覧表示する

Reactの学習メモです。
最初にデータの配列を画面に一覧表示するところから始めることにしました。
タスク一覧を画面に表示していきます。

画像のような画面が出来上がる想定です。

タスク実装

タスクを定義します。

src/types/Task.ts

export type Task = {
  id: string;
  title: string;
};

タスク詳細

タスクの詳細情報を表示するコンポーネントを実装します。

src/components/TaskItem.tsx

import React from "react";
import { Task } from "../types/Task";

type Props = {
  task: Task;
  handleDelete: (task: Task) => void;
};

const TaskItem: React.FC<Props> = ({ task, handleDelete }) => {
  return (
    <div>
      <p>{task.title}</p>
      <button onClick={() => handleDelete(task)}>削除</button>
    </div>
  );
};

export default TaskItem;

タスク一覧表示

タスクの配列を受け取り表示します。

src/components/TaskList.tsx

import React from "react";
import { Task } from "../types/Task";
import TaskItem from "./TaskItem";

type Props = {
  tasks: Task[];
  handleDelete: (task: Task) => void;
};

const TaskList: React.FC<Props> = ({ tasks, handleDelete }) => {
  return (
    <div>
      {tasks.map((task) => (
        <TaskItem key={task.id} task={task} handleDelete={handleDelete} />
      ))}
    </div>
  );
};

export default TaskList;

App.tsx

サンプルデータを準備し、コンポーネントに渡します。

App.tsx

import React, { useState } from "react";
import "./App.css";
import TaskList from "./components/TaskLIst";
import { Task } from "./types/Task";

const initialState: Task[] = [
  {
    id: "1",
    title: "first task",
  },
  {
    id: "2",
    title: "second task",
  },
];

const App: React.FC = () => {
  const [tasks, setTasks] = useState(initialState);

  const handleDelete = (task: Task) => {
    const newTasks = tasks.filter((t) => t.id !== task.id);
    setTasks(newTasks);
  };

  return <TaskList tasks={tasks} handleDelete={handleDelete} />;
};

export default App;

全ソースコードはこちらです。

参考