Tengo una lista de etiquetas de detail y me gustaría cerrar una etiqueta de details abierta cuando se abre otra.
Estoy renderizando dinámicamente una lista de etiquetas de details
estoy usando React y ganchos
Configuré que el atributo abierto se establece con useState y se actualiza cuando se hace clic en una etiqueta de details , pero esto no parece funcionar.
Aquí hay un enlace a un sandbox de código
import { useState } from "react"; const arr = [ { name: "Jim", age: 22 }, { name: "Sarah", age: 42 }, { name: "Don", age: 7 } ]; export default function App() { const [open, setOpen] = useState(false); const toggleDetails = (index) => { setOpen(!open); }; return ( <ul> {arr?.map((thing, index) => ( <details key={index} open={open} onClick={() => toggleDetails(index)}> <summary>{thing.name}</summary> {thing.age} </details> ))} </ul> ); }Agregué una clave de "id" como se presenta en su codesandbox para hacer lo siguiente, use toggleDetails para establecer la identificación del detalle abierto actual y luego, en el accesorio abierto , verifique si la identificación del objeto actual en la matriz coincide con esta del estado.
Si lo hace, abierto es verdadero, de lo contrario es falso.
import { useEffect, useState } from "react"; const arr = [ { id: "03F03BBE", name: "Jim", age: 22 }, { id: "D37DEF7F1E7E", name: "Julie", age: 42 }, { id: "8D61", name: "Don", age: 7 } ]; export default function App() { const [openId, setOpenId] = useState(''); const toggleDetails = (thingId) => { setOpenId(thingId); }; return ( <ul> {arr?.map((thing, index) => ( <details key={index} open={openId === thing.id} onClick={() => toggleDetails(thing.id)}> <summary>{thing.name}</summary> {thing.age} </details> ))} </ul> ); }Esto funciona para mí:
import { useState } from "react"; const faqs = [ { id: "03F03BBE", name: "Jim", age: 22 }, { id: "D37DEF7F1E7E", name: "Julie", age: 42 }, { id: "8D61", name: "Don", age: 7 }, ]; export default function App() { const [openFaqId, setOpenFaqId] = useState(""); const clickActiveFaq = (id) => (e) => { e.preventDefault(); setOpenFaqId(id !== openFaqId ? id : ""); }; return ( <div> {faqs?.map((faq) => ( <details key={faq.id} open={openFaqId === faq.id} onClick={clickActiveFaq(faq.id)} > <summary>{faq.name}</summary> {faq.age} </details> ))} </div> ); }