How to show form only for one element by id?-CodePudding

I want to show my edit form while clicking on some image, but it shows for all tasks, and I cant figure out how to do this only for one task

I tried to show edit form, changing boolean value "active" by useState. However, I dont understand how to create the function, that obtain id of task and show edit form only for this task. Thanks in advance for reply

In App.js I have:

import {useState} from 'react'
import Tasks from "./components/Tasks";


function App() {
 const [modalActive, setModalActive] = useState(false)
 const [tasks, setTasks] = useState( [
      {
          id: 1,
          title: 'Task',
          date: "12/03/2023 10:30",
          status: false,
          urgently: false,
      }
     ....
    ])
   ....
return (
  <div className="container">
    <Tasks tasks={tasks}  active={modalActive} setActive={() => setModalActive(!modalActive)} />
  <div>
)

In Tasks.js:

import Task from "./Task"

const Tasks = ({tasks, active, setActive}) => {
  
 return (
    <div>
      {tasks.map((task) => (
    <Task key ={task.id} task={task} active={active} setActive={setActive}/>
    ))}
   </div>
  )
}

In Task.js:

import {useState} from 'react'
import {FaTimes, FaPencilAlt} from 'react-icons/fa'
import EditTask from './EditTask'


const Task = ({task, active, setActive}) => {  
...
return (
 <p>{task.date} <FaPencilAlt style={{cursor:'pointer'}} onClick={setActive}/></p>
 {active && <EditTask onUpdate={onUpdate} task={task} setActive={setActive}/>}
)

CodePudding user response：

Use conditional statement like

 if(useState)
{
//put your function here to open task
}

CodePudding user response：

You can pass the task id in setActive itself like setActive(task.id) and you can update task using useEffect hook in App.js to find the specific task on every modalActive change.