【React v19入門】Todoアプリ作成から学び始める。3通りのコンポーネント構成方法とその特徴。

const Todo = ({todo, TodoToggle, TodoDelete}) => {
  // ここで親で定義した関数を使う
    const handleToggle = () =>{
        TodoToggle(todo.id);
    };

　// ここで親で定義した関数を使う
    const handleDelete = () =>{
        TodoDelete(todo.id);
    }

  return (
    <li key={todo.id}>
         <input type="checkbox"  
                 checked={todo.completed} 
                 onChange={handleToggle}
          />
        <span>{todo.name}</span>
        <span className="todoBtn" onClick={handleDelete}>[削除]</span>
    </li>
  )
}

export  default  Todo

import Todo from './Todo'

/**Todoコンポーネントまで細分化した場合 */
const TodoList = ({todos, TodoToggle, TodoDelete}) => {
    return todos.map((todo)=>(
        <Todo key={todo.id}   
                 todo={todo}  
                 TodoToggle={TodoToggle}
                 TodoDelete={TodoDelete} />
    ));
};

export default TodoList

import { useState, useRef } from 'react'
import './App.css'
import TodoList from './TodoList'
// import React from 'react'         // ← <React.Fragment></React.Fragment> (<></>なら不要)

function App() {

  const [todos, setTodos] = useState([
      {
       id : 1,
       name: "初めての投稿",
       completed: false,
     },
    {
       id : 2,
       name: "2回目の投稿",
       completed: false,
     }
  ]);



  /**完了フラグの反転 */
  const handleTodoToggle = (id) => {
    
    const newTodos = [...todos];
    const todo = newTodos.find((todo) => todo.id === id);
    todo.completed = !todo.completed;

    setTodos(newTodos);
  };

  const todoNameRef = useRef();

  /**タスクの追加 */
  const handleAddTodo = (e) => {
    const name = todoNameRef.current.value;
    if (name.length <4) {
      todoNameRef.current.value = null;
      return;
    }
  
    const befTodos = [...todos]
    const maxId = befTodos.reduce((max, todo)=>Math.max(max, todo.id), 0)
    
    const newItem = {
      id : maxId +1,
      name: name,
      completed: false,
    }
    
   /**
    *   setTodos()は新しいステートの値を直接渡すことが多いと思いますが、  
   *   このように関数（コールバック関数）を渡すこともできます。
   *    関数を渡す場合、その関数の最初の引数には現在の（最新の）
   *       ステートの値が自動的に渡されます!!
    **/
    setTodos((prevTodos) => {
      return [...prevTodos, newItem];
    });
      todoNameRef.current.value = null;

  };

    /**タスクの削除 */
  const handleDelete = (id) => {
    if(!confirm('削除して良いですか')){
        return;
    }
    const newTodos = todos.filter((todo) => {
      return todo.id !== id;
    });
    setTodos(newTodos);
  };


  return (
    <>
      <h2 className="mainTitle">投稿アプリ</h2>
      <ul className='todo_ul'>
         <TodoList todos={todos} TodoToggle={handleTodoToggle} TodoDelete={handleDelete} />
      </ul>
      <input type="text"   className='todoInput'   ref={todoNameRef} /> 
      <button  onClick={handleAddTodo}>投稿の追加</button>
    </>
  )
}

export default App