Tengo una lista de tareas que dentro tienen otra tarea (subtarea). Uso un mapa para enumerar todas las tareas y tengo un botón para agregar más subtareas a esa tarea. Se supone que el botón de entrada es invisible a menos que se presione el botón. El problema es que utilicé el enlace useState para representar la entrada de forma condicional, pero cada vez que hago clic en cualquiera de los botones, las entradas de todas las tareas se abren y se supone que solo abren la entrada de ese índice determinado.
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> ); }); };Esto se debe a que está configurando openTask en verdadero para todos los elementos. Puede crear un objeto y almacenar la identificación específica en verdadero. por ej.
const [openTask, setOpenTask] = useState({});y luego en el botón onClick puede configurar la identificación específica para abrir
setOpenTask({...openTask,[`${item.name}-${index}`]:true});y luego verifique con una identificación específica
{openTask[`${item.name}-${index}`] && <input placeholder="Add more tasks..."/>}Intenta usar matriz
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> ); }); };