Tengo una serie de datos que se usarán para crear acordeones, me gustaría que solo uno de ellos se pueda expandir a la vez (es decir, si el usuario expande el acordeón n.° 1 y luego el n.° 2, el n.° 1 des-expandir)
tengo este codigo:
const MyAccordion = props => { const [expanded, setExpanded] = React.useState() const handleChange = panel => (_, isExpanded) => {setExpanded(isExpanded ? panel : false)} const classes = styles //? let accordionInfo = createAccordionInfo(props.propthing); return ( <Accordion key={accordionInfo.uid} onChange={handleChange(accordionInfo.uid)} expanded={expanded === accordionInfo.uid} TransitionProps={{unmountOnExit: true}} className={classes.accordion} > <AccordionSummary expandIcon={<ExpandMoreIcon />} aria-controls={`${accordionInfo.uid}-content`} id={`${accordionInfo.uid}-header`}> <Typography>Accordion Summary</Typography> </AccordionSummary> <AccordionDetails> <Typography>Accordion Details</Typography> </AccordionDetails> </Accordion> ) } const MyAccordions = props => { const [expanded, setExpanded] = React.useState() const handleChange = panel => (_, isExpanded) => {setExpanded(isExpanded ? panel : false)} return ( <div className={styles.root}> {accordions.map(accordion => ( <MyAccordion onChange={handleChange} propthing={accordion} /> ))} </div> ) }Soy bastante nuevo en React, así que sospecho que cometí un error con los estados. ¡Cualquier ayuda/consejo sería apreciada! Gracias
Parece que intentó poner el estado y los controladores en los componentes MyAccordion principal y MyAccordions secundario. Si solo desea abrir un acordeón a la vez, sugiero colocar el estado en el componente principal para que pueda administrar lo que está abierto/expandido. Utilice los ID de acordeón de niños como base para determinar cuál debe expandirse.
Padre
const MyAccordions = props => { const [expanded, setExpanded] = React.useState(null); const handleChange = id => (_, isExpanded) => { // if expanded, set id to open/expand, close it otherwise setExpanded(isExpanded ? id: null); }; return ( <div className={styles.root}> {accordions.map(accordion => { const info = createAccordionInfo(accordion); return ( <MyAccordion key={info.uid} // <-- set React key here!! onChange={handleChange(info.uid)} expanded={expanded === info.uid} /> ) })} </div> ); };Niño
const MyAccordion =({ expanded, onChange }) => { const classes = styles //? return ( <Accordion onChange={onChange} expanded={expanded} TransitionProps={{unmountOnExit: true}} className={classes.accordion} > <AccordionSummary expandIcon={<ExpandMoreIcon />} aria-controls={`${accordionInfo.uid}-content`} id={`${accordionInfo.uid}-header`} > <Typography>Accordion Summary</Typography> </AccordionSummary> <AccordionDetails> <Typography>Accordion Details</Typography> </AccordionDetails> </Accordion> ); };