Conditional rendering an input inside a map

Question

I have a list of task which inside have another task(subTask). I use a map to list all the tasks and have a button to add more subtasks to that task. The input button is supposed to be invisible unless the button is pressed. The problem is that I used the useState hook to conditional render the input but whenever I click in any of the button, the inputs of all tasks open and is supposed to only open the input from that certain index.

const Task = () => {
  const [openTask, setOpenTask] = useState(false);

  return task.map((item, index) => {
    return (
      <div>
        <button onClick={() => setOpenTask(!openTask)}>Add</button>
        {item.name}
        {openTask && <input placeholder="Add more tasks..."/>}
        {item.subTask.map((item, index) => {
          return (
            <>
              <span>{item.name}</span>
            </>
          );
        })}
      </div>
    );
  });
};

Answer 1

That's because you are setting openTask to true for all the items. You can create object and store the specific id to true. for eg.

const [openTask, setOpenTask] = useState({});

and then on button onClick you can set the specific id to open

setOpenTask({...openTask,[`${item.name}-${index}`]:true});

and then check against specific id

{openTask[`${item.name}-${index}`] && <input placeholder="Add more tasks..."/>}