How do I retrieve an item data by id and pass it to another component in React16 with Hooks

I want to create an edit screen. I have a component called Task that looks like this

const Task = ({task}) => {
  return (
    <li>
      <div>
        <div>{task.text}</div>
        {task.day}
      </div> 
      <div className="icons">
        <Link 
          to={`/edit/${task.id}`} > 
          <RiEdit2FillIcon />
        </Link>
      </div>
    </li>
  )
}

That goes to a parent component with a tasks.map() and then to the main component that will render the list of tasks. But from this component, I want to click on that Edit Icon and open an Edit screen that is already Routed like this <Route path='/edit/:id' component={EditTask}/> That EditTask component is what I am working on now

import React from 'react'
import {useState, useEffect} from 'react'
import { Link } from 'react-router-dom'
import Task from './components/Task'

const EditTask = () => {
  const api ="http://localhost:5000"

  const [tasks, setTasks] = useState([]) 
  const [task, setTask] = useState([]) 
  const [text, setText] = useState('')
  const [day, setDay] = useState('')
  const [reminder, setReminder] = useState(false)

  const onSubmit = (e) => {
    e.preventDefault()
    updateData()
  }
  //Get Request
  useEffect(() => {
    const getTask = async () => {
      const tasksFromServer = await fetchTask()
      setTasks(tasksFromServer)
    }
    getTask()
  },[])

  const fetchTask = async (id) => {
    const res = await fetch(`${api}/tasks/${id}`)
    const data = await res.json()
    console.log(data)
    return data
  }

  //Update request
  const updateData = async (id) => {
    const taskToEdit = await fetchTask(id)
    const updateTask = {
      ...taskToEdit, 
      reminder: !taskToEdit.reminder,
      text: taskToEdit.text,
      day: taskToEdit.day
    }

    const res = await fetch(`${api}/tasks/${id}`, {
      method: 'PUT',
      headers: {
        'Content-type': 'application/json'
      },
      body: JSON.stringify(updateTask)
    })
    const data = await res.json()

    setTasks(
      tasks.map((task) => 
        task.id === id 
        ? {
            ...task, 
            reminder: data.reminder,
            text: data.text,
            day: data.day
          } 
        : task
      )
    )
  }

  return (
    <div>
      <header className='header'>
        <h1>Edit</h1>
        <Link to="/" className="btn btn-primary">Go Back</Link>
      </header>
      <form className="add-form" onSubmit={onSubmit}>
        <Task task={task}/>
        <div className="form-control">
          <label>Task</label>
          <input type="text" placeholder="Add Task" value={text} onChange={(e)=> setText(e.target.value)} />
        </div>
        <div className="form-control">
          <label>Day & Time</label>
          <input type="text" placeholder="Add Day & Time"  value={day} onChange={(e)=> setDay(e.target.value)}/>
        </div>
        <div className="form-control form-control-check">
          <label>Set Reminder</label>
          <input type="checkbox" checked={reminder} value={reminder} onChange={(e)=> setReminder(e.currentTarget.checked)}/>
        </div>
        <input className="btn btn-block" type="submit" value="Save Task" />
      </form>
    </div>
    
  )
}

export default EditTask

I’m a bit lost here. I can’t figure out how to pass the ID from Task.js to EditTask.js and populate the form with the data form that ID.

Thanks in advance

Answer

You can get id in EditTask with useParams in "react-router

import { useParams } from "react-router";

const EditTask = () => {
  const { id } = useParams();
}