How to open/close single dropdown menu

Question

i have created mapped dropdown menu, but cant figure out how to open/close selected one Already i have somethink like this

{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>
                ))}

handleIsOpen function

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,
        })
    }
}

Actualy when i click on button it dont change its style

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;
`;

Answer 1

The problem is that you just use isOpen as a boolean. Objects are always truthy so you should check the actual entry of the object.

{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>
                ))}