前提・実現したいこと
以下のコードをapp.tsxでstateを管理して他の子コンポーネントにはpropsとして値を渡して表示させるだけにするにはどう書いたらいいのでしょうか?
該当のソースコード
import React from 'react' import { Task } from './Types' type Props = { task: Task handleDone: (task: Task) => void handleDelete: (task: Task) => void } const TaskItem: React.FC<Props> = ({ task, handleDone, handleDelete }) => { return ( <li className={task.done ? 'done' : ''}> <label> <input type="checkbox" className="checkbox-input" onClick={() => handleDone(task)} defaultChecked={task.done} /> <span className="checkbox-label">{ task.title }</span> </label> <button onClick={() => handleDelete(task)} className="btn is-delete" >削除</button> </li> ) } export default TaskItem
import React from 'react' import TaskItem from './TaskItem' import { Task } from './Types' type Props = { tasks: Task[] setTasks: React.Dispatch<React.SetStateAction<Task[]>> } const TaskList: React.FC<Props> = ({ tasks, setTasks }) => { const handleDone = (task: Task) => { setTasks(prev => prev.map(t => t.id === task.id ? { ...task, done: !task.done } : t )) } const handleDelete = (task: Task) => { setTasks(prev => prev.filter(t => t.id !== task.id )) } return ( <div className="inner"> { tasks.length <= 0 ? '登録されたTODOはありません。' : <ul className="task-list"> { tasks.map( task => ( <TaskItem key={task.id} task={task} handleDelete={handleDelete} handleDone={handleDone} /> )) } </ul> } </div> ) } export default TaskList
import React, { useState } from 'react' import { Task } from './Types' type Props = { setTasks: React.Dispatch<React.SetStateAction<Task[]>> tasks: Task[] } const TaskInput: React.FC<Props> = ({ setTasks, tasks }) => { const [ inputTitle, setInputTitle ] = useState<string>('') const [ count, setCount ] = useState<number>(tasks.length + 1) const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => { setInputTitle(e.target.value) } const handleSubmit = () => { setCount(count + 1) const newTask: Task = { id: count, title: inputTitle, done: false } setTasks([newTask, ...tasks]) setInputTitle('') } return ( <div> <div className="inputForm"> <div className="inner"> <input type="text" className="input" value={inputTitle} onChange={handleInputChange} /> <button onClick={handleSubmit} className="btn is-primary">追加</button> </div> </div> </div> ) } export default TaskInput
あなたの回答
tips
プレビュー