Necesito abrir el componente secundario por elemento en el que se hizo clic. Primer código de verificación:
<div className="d-flex"> {boardList.map((list) => ( <div className="card m-3 p-3" key={list.id}> <div className="d-flex flex-column"> <h6> {list.name} </h6> <ul className="list-group"> {list.cards.map((card) => ( <li className="list-group-item" key={card.id}> {card.name} </li> ))} </ul> {isVisible ? ( <TodoForm onCloseForm={onCloseForm} /> ) : ( <small className="mt-2" onClick={showInput} > Add new task + </small> )} </div> </div> ))} </div>Esto es trabajo, pero cuando hago clic en 'Agregar nueva tarea +', se me abre un componente secundario en todas partes. Solo quiero que se abra el componente con la identificación o el índice seleccionado.
también componente para esto:
const [isVisible, setIsVisible] = useState(false); const [boardList, setBoardList] = useState([]); useEffect(() => { axiosInstance .get("") .then((res) => { setBoardList(res.data); console.log("resp", boardList); }) .catch((err) => { console.log(err); }); }, []); const showInput = () => { setIsVisible(true); }; const onCloseForm = () => { setIsVisible(false); };Todos los elementos de la matriz resultante de boardList.map dependen del mismo estado isVisible , es por eso que cuando hace clic en uno de ellos, todos los elementos imitan el mismo comportamiento.
Lo que necesitas es crear un componente con su propio estado para encapsular esta parte de tu código.
{isVisible ? ( <TodoForm onCloseForm={onCloseForm} /> ) : ( <small className="mt-2" onClick={showInput} > Add new task + </small> )} De esta manera, cada instancia de este nuevo componente tendría su propio isVisible para que ya no afecten el estado de sus hermanos.
El componente se vería así.
const NewComponent = () => { const [isVisible, setIsVisible] = useState(false); return <> {isVisible ? ( <TodoForm onCloseForm={onCloseForm} /> ) : ( <small className="mt-2" onClick={() => setIsVisible(true)}> Add new task + </small> )} </> };