How to go to the task page in React when clicking on the task name?

Question

React

Good afternoon, help a beginner! I brought the task from the json file to the screen, displayed the necessary object properties,
tell me how to go to the task page with the ability to edit its name when you click on the task name in the table, and when you return to the table, the changed task name should be saved! I will be grateful for your help! I use create-reac-app , react-router-dom

import React, {Component} from 'react';
import PostData from '../data/tasks';



export default class TaskList extends Component {

    render() {

        return (
            <div className="container">
                <table className="table table-striped table-hover">
                    <thead className="thead-dark">
                    <tr>
                        <th>Name</th>
                        <th>Tags</th>
                        <th>Actual effort</th>
                        <th>Estimated effort</th>
                        <th>Due date</th>
                    </tr>
                    </thead>
                    <tbody>
                    {
                        PostData.map((item, index) => {
                            if (item.obj_status === "active"){
                                return (
                                    <tr key={index}>
                                        <th>{item.name}</th>
                                        <th>{item.tags}</th>
                                        <th>{item.actual_effort}</th>
                                        <th>{item.estimated_effort}</th>
                                        <th>{item.due_date}</th>
                                    </tr>
                                )
                            }}
                        )

                    }

                    </tbody>
                </table>
            </div>
        )
    }
}

Answer 1

1. You need to render a router link in the list elements with a parameter that will be used to search for json. For example: 2. Next, you need to add a Route for detailing:
3. In the TaskDetails component, we get the required task using the parameter intercepted by the router:

import React from 'react';
import tasks from '../data/tasks';

const TaskDetails = ({ match }) => {
  const { id } = match.params;
  const task = tasks.find(item => item.id === id);

  return ( /* ... */ );
}

export default TaskDetails;