有条件地在地图内渲染输入

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..."/>}

Answer 2

Try using array

const Task = () => {
    const [openTask, setOpenTask] = useState([]);
  
    const openTaskHandler = (id) => {
        setOpenTask([id])
    }
    return task.map((item, index) => {
      return (
        <div>
          <button onClick={() => openTaskHandler(item.id)}>Add</button>
          {item.name}
          {openTask.includes(item.id) && <input placeholder="Add more tasks..."/>}
          {item.subTask.map((item, index) => {
            return (
              <>
                    <span>{item.name}</span>
              </>
            );
          })}
        </div>
      );
    });
  };