React + TypeScript でTodoリストを作る！サンプルを用いて解説

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

import Todo from "./components/Todo";

const App = () => {
  return (
    <>
      <h2>- Todo List -</h2>
      <Todo />
    </>
  );
};

export default App;

import { useState } from "react";
import List from "./List";
import Form from "./Form";

// TODOの型を定義する
export type Todo = {
  id: number;
  content: string;
  editing: boolean;
};

const Todo = () => {

　// デフォルトのTODOリスト
  const todosList = [
    {
      id: 1,
      content: "店を予約する",
      editing: false,
    },
    {
      id: 2,
      content: "卵を買う",
      editing: false,
    },
    {
      id: 3,
      content: "郵便を出す",
      editing: false,
    },
  ];

　// TODOリストのState管理
  const [todos, setTodos] = useState<Todo[]>(todosList);

　// 削除
  const deleteTodo = (id: number) => {
    const newTodos = todos.filter((todo) => {
      return todo.id !== id;
    });
    setTodos(newTodos);
  };

　// 作成
  const createTodo = (todo: Todo) => {
    setTodos([...todos, todo]);
  };

　// 更新
  const updateTodo = (todo: Todo) => {
    const newTodos = todos.map((_todo) => {
      return _todo.id === todo.id ? { ..._todo, ...todo } : { ..._todo };
    });
    setTodos(newTodos);
  };

  return (
    <>
      // 各々に必要なPropsを渡す
      <List todos={todos} deleteTodo={deleteTodo} updateTodo={updateTodo} />
      <Form createTodo={createTodo} />
    </>
  );
};
export default Todo;

import { Item } from "./Item";
import { Todo } from "./Todo";

// 受け取るPropsの型を定義する
type Listprops = {
  todos: Todo[];
  deleteTodo: Function;
  updateTodo: Function;
};

const List: React.FC<Listprops> = ({ todos, deleteTodo, updateTodo }) => {
　// 押したTODOのidを[deleteTodo]に渡す
  const complete = (id: number) => {
    deleteTodo(id);
  };
  return (
    <div>
　　// TODOリストを取得して[map関数]で１つ１つ取り出す
      {todos.map((todo) => {
        return (
　　　// [Item]に必要なPropsを渡す
          <Item
            key={todo.id}
            todo={todo}
            complete={complete}
            updateTodo={updateTodo}
          />
        );
      })}
    </div>
  );
};

export default List;

import React, { useState } from "react";
import { Todo } from "./Todo";

// 受け取るPropsの型を定義する
type ItemProps = {
  todo: Todo;
  complete: Function;
  updateTodo: Function;
};

export const Item: React.FC<ItemProps> = ({ todo, complete, updateTodo }) => {
　// テキストのState管理
  const [editingContent, setEditingContent] = useState(todo.content);

  // 編集状態の切り替え
  const editMode = () => {
    const newTodo = {
      ...todo,
      editing: !todo.editing,
    };
    updateTodo(newTodo);
  };

　// 編集を確定する
  const confirmContent = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    const newTodo = {
      ...todo,
      content: editingContent,
      editing: !todo.editing,
    };
    updateTodo(newTodo);
  };

  return (
    <div key={todo.id}>
      <form onSubmit={confirmContent} style={{ display: "inline" }}>
        <span onDoubleClick={editMode}>
          {todo.editing ? (
            <input
              type="text"
              placeholder="入力してね"
              value={editingContent}
              onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
                setEditingContent(e.target.value)
              }
            />
          ) : (
            todo.content
          )}
        </span>
      </form>
      <button onClick={() => complete(todo.id)}>-</button>
    </div>
  );
};

import React, { useState } from "react";

// 受け取るPropsの型を定義する
type FormProps = {
  createTodo: Function;
};

const Form: React.FC<FormProps> = ({ createTodo }) => {
　// 入力値のState管理
  const [enteredTodo, setEnteredTodo] = useState("");

　// 作成したTODOを[createTodo]に渡す
  const addTodo = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    const newTodo = {
      id: Math.floor(Math.random() * 1e5),
      content: enteredTodo,
    };
    createTodo(newTodo);
    setEnteredTodo("");
  };

  return (
    <div>
      <form onSubmit={addTodo}>
        <input
          type="text"
          placeholder="入力してね"
          value={enteredTodo}
          onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
            setEnteredTodo(e.target.value)
          }
        />
        <button>+</button>
      </form>
    </div>
  );
};

export default Form;