Reactの練習としてTodoアプリを作っているのだが、タスクを配列のStateで管理しようとした際につまづいたのでメモ。

配列に値を追加する際に通常使われるpushメソッドだと、うまく機能しないため、下記コードのcreateTask内22行目でおこなっているようにsetTasksと...tasks（スプレッド構文）を組み合わせて、配列の末尾にデータを追加する必要がある。

import { useState } from 'react';
import Form from './components/Form';

function App() {
  const [tasks, setTasks] = useState([
    {
      name: 'task1',
      date: '2021-11-30 12:00:00',
    },
    {
      name: 'task2',
      date: '2021-11-30 13:00:00',
    },
  ]);

  const createTask = (e) => {
    e.preventDefault();
    const { taskName } = e.target.elements;
    const now = new Date();
    const nowFormated = `${now.getFullYear()}-${('0'+(now.getMonth()+1)).slice(-2)}-${('0'+now.getDate()).slice(-2)}`;

    setTasks([...tasks, {
      name: taskName.value,
      date: nowFormated,
    }]);
  }

  return (
    <>
      <Form createTask={createTask} />
    </>
  );
}

export default App;

ちなみにcreateTaskを実行するFormコンポーネントの中身はこのようになっている。

const Form = ({createTask}) => {
  return (
    <form onSubmit={createTask}>
      <input type="text" name="taskName" />
      <button type="submit">登録</button>
    </form>
  );
}

export default Form;

Formコンポーネントの「登録ボタン」を押すとcreateTaskが走り、入力したタスク名が日付とともに、配列の末尾にオブジェクトとして保存される。