Home > Net >  How to show edit form only for one task by id?
How to show edit form only for one task by id?

Time:01-28

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.

  • Related