How can I get child function data inside parent data?

Question

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;

Answer 1

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;