Implementé el acordeón pero ahora quiero mostrar solo un elemento en particular a la vez. Sé que hay muchas respuestas disponibles en esta plataforma con respecto a este mismo problema, pero no puedo encontrar ninguna solución adecuada. En realidad, no quiero agregar ninguna clase en el elemento activo y no quiero hacerlo con CSS. Con JavaScript puro, ¿cómo puedo lograr esto? Aquí está mi código:
const PerFAQ = ({ ques, ans }) => { const [isShown, setIsShown] = useState(false) return ( <> <li> <a onClick={() => setIsShown(!isShown)}>{ques} { !isShown ? <BsChevronDown /> : <BsChevronUp /> } </a> { isShown && <ul> <li> {ans} </li> </ul> } </li> </> ) }Dispuesto a compartir más código si es necesario.
Puede hacer esto levantando el estado isShown.
Por ejemplo:
const ListItem = ({visible, onExpand}) => { return( <div> <button onClick={onExpand}>Expand</button> {visible && <p>your content</p>} </div> ); } const List = ({items}) => { const [visibleIdx, setVisibleIdx] = useState(-1); return ( <div> <ListItem visible={visibleIdx == 0} onExpand={() => setVisibleIdx(0)} /> <ListItem visible={visibleIdx == 1} onExpand={() => setVisibleIdx(1)} /> </div> ) }Editar: Puede que no esté claro a qué me refiero. Los componentes de React forman una jerarquía de árbol. Cada elemento tiene hijos. El estado de un componente es almacenado por el propio componente. Puede pasar estos componentes a sus hijos, pero no puede pasarlos a sus padres. Si necesita acceder al estado desde el padre, la única solución es levantarlo. Eso significa que debe mover el estado al componente principal, y ese componente debe pasarlo a sus hijos.