He creado un menú desplegable mapeado, pero no puedo entender cómo abrir/cerrar uno seleccionado. Ya tengo algo como esto.
{navItems.map(({ id, icon, text}) => ( <Dropdown> <DropdownButton id={id} onClick={() => handleIsOpen(id)}>{text}{icon ? <img src={icon} alt="arrow-down" /> : null}</DropdownButton> <DropdownContent isOpen={isOpen}> <DropdownLink href="#">Link 1</DropdownLink> <DropdownLink href="#">Link 2</DropdownLink> <DropdownLink href="#">Link 3</DropdownLink> </DropdownContent> </Dropdown> ))}función handleIsOpen
const [isOpen, setIsOpen] = useState({ 1: false, 2: false, }); const handleIsOpen = (id) => { if (id === 1 || id === 2) { setIsOpen({ [id]: !isOpen[id], }) } else { setIsOpen({ ...isOpen, 3: false, 4: false, }) } }En realidad, cuando hago clic en el botón, no cambia su estilo.
export const DropdownContent = styled.div` display: ${({isOpen}) => isOpen ? 'none' : 'block'}; position: absolute; background-color: white; min-width: 128px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; `;El problema es que solo usa isOpen como booleano. Los objetos siempre son veraces, por lo que debe verificar la entrada real del objeto.
{navItems.map(({ id, icon, text}) => ( <Dropdown> <DropdownButton id={id} onClick={() => handleIsOpen(id)}>{text}{icon ? <img src={icon} alt="arrow-down" /> : null}</DropdownButton> <DropdownContent isOpen={!!isOpen[id]}> <DropdownLink href="#">Link 1</DropdownLink> <DropdownLink href="#">Link 2</DropdownLink> <DropdownLink href="#">Link 3</DropdownLink> </DropdownContent> </Dropdown> ))}