Ist es möglich, mit React eine Funktion mit einem ID-Parameter von einer untergeordneten Komponente an eine übergeordnete Komponente zu übergeben? Ich versuche, die Funktion als Requisite an die übergeordnete Komponente zu übergeben. Die Komponentenlösung ist App-Komponente-> TasksList-Komponente-> Ich muss also zu einer bestimmten Aufgabe weiterleiten, indem ich darauf klicke und deren individuelle ID verwende. Der Punkt ist, wenn die URL angeklickt und an die Aufgabe weitergeleitet wird, ändert sie sich in /task/009, die Aufgabenkomponente wird jedoch nicht gerendert.

https://codesandbox.io/s/test-login-page-tasks-rmfn5j?file=/src/components/Taskslist.js

//App component
const Tasks = [
  {
    id: "001",
    status: 0,
    priority: 2,
    title: "Develop website homepage",
    description:
      "Create a visually appealing and responsive homepage for the website",
    schedule: {
      creation_time: "2021-07-23T10:00:00"
    },
    author_name: "John Smith"
  },
  {
    id: "002",
    status: 1,
    priority: 1,
    title: "Implement user authentication",
    description: "Add user authentication feature to the website",
    schedule: {
      creation_time: "2021-07-24T14:30:00"
    },
    author_name: "Sarah Lee"
  }
  ]
  
  function App() {
  const [tasks, setTasks] = useState(Tasks);
  return (
  
    <Route path="/taskslist">
      <Taskslist Tasks={tasks} />
    </Route>
  )

// Parent component
import React from "react";

const Taskslist = ({ Tasks }) => {
  const history = useHistory();

  const goToTask = (taskId) => {
    history.push(`/task/${taskId}`);
  };

  return (
    <Task
      Tasks={Tasks.filter((task) => task.status === 0)}
      goToTask={goToTask}
    />
}

//Child component

import React from "react";

const Task = ({ Tasks, goToTask }) => {
  return (
    <div className="wrapper">
      {Tasks.map((task) => (
        <div key={task.id} onClick={goToTask(task.id)}>
          <h3>{task.title}</h3>
        </div>
      ))}
    </div>
  );
};

export default Task;