onClick

import { useState, useEffect } from 'react';

export default function Home() {
  const [tasks, setTasks] = useState(() => {
    const savedata = localStorage.getItem('tasks');
    return savedata ? JSON.parse(savedata) : [];
  });
  const [input, setInput] = useState('');

  // tasksの内容に変更があるたびに関数を実行する
  // addTask関数やdeleteTask関数内で毎度localStorage.setItem()してもいいが、
  // コッチのほうがReactの思想に沿っている
  useEffect(() => {
    localStorage.setItem('tasks', JSON.stringify(tasks));
  }, [tasks]);

  const addTask = () => {
    setTask([...tasks, input]);
    setInput('');
  };

  const deleteTask = (index) => {
    const newTasks = [...tasks];
    // 配列のindex+1番目（index=2なら3番目）から1つ削除する
    newTasks.splice(index, 1);
    setTasks(newTasks);
  };

  return (
    <>
      <ul>
        {tasks.map((task, idx) => (
          <li key={idx}>
            {task}
            // deleteTask関数は引数があるので()=>を入れること
            // onClick={deleteTask(idx)}にしてしまうと
            // コンポーネントがレンダリングされるときに関数が実行されてしまう
            // そのため、{task}を記述した直後に削除してしまい、追加ボタンを押しても何も表示されなくなってしまう
            <button onClick={() => deleteTask(idx)}>削除</button>
          </li>
        ))}
      </ul>
      <div>
        <input
          type="text"
          value={input}
          onChange={(e) => setInput(e.target.value)}
          placeholder="fill out task" />
        // addTask関数は引数がないのでコレでOK
        <button onClick={addTask} >追加</button>
      </div>
    </>
  );
}