My purpose is Making to-do list using React.
App.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;
Without editing any code under 'onRemove'function, I'd like to get this function inside 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;
I couldn't finish writing CreateTask.js.
But rather than writing CreateTask.js, I want to finish TaskList.js earlier.
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;
You have to extract tasks and onRemove function from props in TaskList.js .
And then you can pass id of the task in onRemove function in TaskList.js .
import React from "react";
function Task({task, removeTask}){
return <div>
<b>{task.taskname}</b><button onClick = {() => {removeTask(task.id)}}>Remove</button>
</div>
}
function TaskList({tasks, onRemove}){
return (
<div>
{tasks.map((task, index) => (
<Task task = {task} removeTask={onRemove} key={index}/>
))}
</div>
);
}
export default TaskList;