React.jsでToDoリストを更新する方法

ステートのセットアップ: まず、ToDoアイテムの一覧を管理するためのステートをセットアップします。以下のようにuseStateフックを使用します。

import React, { useState } from 'react';
function TodoList() {
  const [todos, setTodos] = useState([]);
  // ToDoリストの更新処理などを追加する
  return (
    // ToDoリストの表示などを追加する
  );
}
export default TodoList;

ToDoアイテムの追加: 新しいToDoアイテムを追加するための関数を作成します。この関数では、現在のToDoリストの状態を更新します。

function addTodoItem(newItem) {
  setTodos([...todos, newItem]);
}

ToDoアイテムの削除: ToDoアイテムを削除するための関数を作成します。この関数では、指定されたアイテムを除いた新しいToDoリストの状態をセットします。

function removeTodoItem(itemToRemove) {
  const updatedTodos = todos.filter(item => item !== itemToRemove);
  setTodos(updatedTodos);
}

ToDoリストの表示: ToDoリストを表示するために、マッピングを使用してリストアイテムをレンダリングします。

function TodoList() {
  // ステートと関数のセットアップ
  return (
    <ul>
      {todos.map(item => (
        <li key={item}>{item}</li>
      ))}
    </ul>
  );
}

これらの手順を組み合わせることで、React.jsでToDoリストを更新することができます。適宜、デザインや追加の機能を追加して、ToDoリストをカスタマイズすることもできます。