Tengo este setState para controlar el estado de apertura/cierre de mi panel algo similar a esta publicación aquí . Y estoy tratando de open one panel at one time para que solo haya un valor verdadero en el state .
Aquí está mi código:
// Parents component const [show, setShow] = useState({ 1 : false, // id=1 when passed to child component (using another props but 2 : false, // dont worry, I'm passing it correctly) 3 : false, // id=3 and so on... 4 : false, 5 : false, 6 : false }) //Child component // id is used to check which panel is in open/close state const handleShowPanel = (id) => { const val = !props.show // props.setShow(prev => ({...prev, [key[0].charCodeAt(0)]: false})) props.setShow(prev => ({...prev, [id] : val})) //this is the one i'm using // props.setShow(prev => Object.fromEntries(Object.entries(prev).map(([k, v]) => Number(k) !== id ? [k, !v] : [k, false]))) } El código que estoy usando funciona perfectamente bien abriendo y cerrando un panel por otro.
Aquí hay una imagen para una mejor ilustración , digamos que primero abrí el Panel 1 , después de eso, cuando hice clic en el Panel 2 , quiero cerrar el Panel 1 mientras opening Panel 2 . Así que tendré que establecer todos los demás valores en falso, excepto el panel que estoy abriendo. Es como el modo acordeón en el diseño de hormigas.
Si solo desea abrir un panel a la vez, ¿por qué no almacenar la identificación del panel que desea abrir?
El componente principal posee tanto el estado como las funciones del controlador para actualizarlo, pasa a cada panel la identificación abierta actualmente y la devolución de llamada para abrir un nuevo panel.
const [showId, setShowId] = useState(null); // <-- initially none open const handleShowPanel = (id) => { // if already open, close it, otherwise set to new id to // close previous and open next setShowId(showId => showId === id ? null : id); }; Luego, al mapear/representar los paneles, simplemente verifique la id del panel actual con el valor de estado de showId establecido actualmente para establecer el estado abierto/accesorio en consecuencia.
En este caso, es posible que no necesite mantener el estado de visualización para todos los paneles, solo mantenga el índice del panel abierto, intente de esta manera
const panels = [ {id:1, name:'name1', description:'description 11'}, {id:1, name:'name2', description:'description 22'}, {id:1, name:'name3', description:'description 33'}, {id:1, name:'name4', description:'description 44'}, {id:1, name:'name5', description:'description 55'}, {id:1, name:'name6', description:'description 66'} ] const PanelParent = () => { const [openId, setOpenId] = useState('') //set an id if you need to open a default panel const handleShowPanel = (id) => { setOpenIndex(openId == id ? false : id) } return <> {panels.map(d => { return <Panel data={d} handleShowPanel={handleShowPanel} open={openId == d.id}/> })} </> }