Mi propósito es hacer una lista de tareas pendientes usando React.

Aplicación.js

 import React ,{useState,useRef} from "react" import CreateTask from "./CreateTask.js" import TaskList from "./TaskList.js" function App() { const [inputs, setInputs] = useState({ }); const { taskname } = inputs; const onChange = (e) => { }; const [tasks, setTasks] = useState([ ]); const nextId = useRef(); // nextId.current const onCreate = () => { }; const onRemove = (id) => { setTasks(tasks.filter((user) => user.id !== id)); }; return ( <> <CreateTask task={taskname} onChange={onChange} onCreate={onCreate} /> <TaskList tasks={tasks} onRemove={onRemove} /> </> ); } export default App;

Sin editar ningún código en la función 'onRemove', me gustaría obtener esta función dentro de TakeList.js.

CreateTask.js

 import React from "react"; function CreateTask({task,onChange,onCreate}){ return( <div> <input task = "task" value={task} placeholder="Todo"/> <button onClick = {onCreate}>Register</button> </div> ); } export default CreateTask;

No pude terminar de escribir CreateTask.js.

Pero en lugar de escribir CreateTask.js, quiero terminar TaskList.js antes.

TaskList.js

 import React from "react"; function Task({task}){ return <div> <b>{task.taskname}</b><button onClick = {onRemove}>Remove</button> </div> } function TaskList(){ const tasks = [ { id:1, taskname: "Homework", }, { id:2, taskname: "Workout", }, { id:3, taskname: "Clean", } ] return ( <div> {tasks.map((task, index) => ( <Task task = {task} key={index}/> ))} </div> ); } export default TaskList;