Why the child component isn't rendered when clicked on Link router dom with React?

Question

I'd like to schieve by clicking on an individual child TaskComponent component to rout to that component sending it's is param via useParams hook. So the url changes , it means the routing works, but the component isn't rendered. Maybe it's a typo error, or the props aren't received by the child TaskComponent, so tha that the html isn't showed up.

https://codesandbox.io/s/test-login-page-tasks-24-04-vp0v8m?file=/src/components/Task.js

// App.js

function App() {
  const [tasks, setTasks] = useState(Tasks);
  return (
    <BrowserRouter>
      <div>
        <Header />
        <Switch>
          <Route path="/taskslist">
            <Taskslist Tasks={tasks} />
          </Route>
          <Route path="/task/:id">
            <TaskComponent Tasks={tasks} />
          </Route>
        </Switch>
      </div>
    </BrowserRouter>
  );
}
export default App;

// Parent component

const Taskslist = ({ Tasks }) => {
  return (
        <div className="tasks__tasks-item">
          {Tasks.filter((task) => task.status === 0).map((task) => (
            <Task task={task} key={task.id} />
          ))}
        </div>

// Task component

import React from "react";
import { Link, generatePath } from "react-router-dom";

const Task = ({ task }) => {
  return (
    <div className="wrapper">
      <Link to={generatePath("/task/:id", { id: task.id })}>
        <h3>{task.title}</h3>
        <h4>{task.author_name}</h4>
      </Link>
    </div>
  );
};

export default Task;

// Child TaskComponent

import React from "react";
import { useParams } from "react-router-dom";

const TaskComponent = ({ Tasks }) => {
  const { id } = useParams();

  const task = Tasks.filter((task) => String(task.id) === id);

  if (!task) {
    return <div>No Task</div>;
  }

  return (
    <div className="wrapper">
      <div>
        <h3>{task.title}</h3>              //  This part isn't rendered in the browser
        <h4>{task.author_name}</h4>
      </div>
    </div>
  );
};

export default TaskComponent;

I am expecting to visualize the Child TaskComponent by clicking on each individual Task component which is inside the Tasklist parent Component

Answer 1

It should be Array.prototype.find instead of Array.prototype.filter. .filter returns an array instead of the task object you want to render.

import React from "react";
import { useParams } from "react-router-dom";

const TaskComponent = ({ Tasks }) => {
  const { id } = useParams();

  const task = Tasks.find((task) => String(task.id) === id);

  if (!task) {
    return <div>No Task</div>;
  }

  return (
    <div className="wrapper">
      <div>
        <h3>{task.title}</h3>
        <h4>{task.author_name}</h4>
      </div>
    </div>
  );
};

export default TaskComponent;