Filter Out Dropdown Values in React-CodePudding

I have two problems. First is once I click the button again if the dropdown is opening, it should close. Second, I need to filter out the values that are shown on it. Once it has been selected, it should disappear from the available options?

Check my code sandbox here

<DropdownMenu show={isComponentVisible} ref={ref}>
  {statuses.map(({ id, statusName }) => (
    <MenuButton
      type="button"
      key={id}
      onClick={() => handleSelect(statusName)}
    >
      {statusName}
    </MenuButton>
  ))}
</DropdownMenu>

CodePudding user response：

When you click the button, you set isComponentVisible to true, but handleClickOutside is called as well, and sets it to false:

const handleClickOutside = (event) => {
  if (ref.current && !ref.current.contains(event.target)) {
    setIsComponentVisible(false);
  }
};

The handleClickOutside should ignore the button. You can create another ref for the button. For example:

const handleClickOutside = (event) => {
  if (
    ref.current &&
    !ref.current.contains(event.target) &&
    buttonRef.current &&
    !buttonRef.current.contains(event.target)
  ) {
    setIsComponentVisible(false);
  }
};

To filter the items, according to the current one, just add a simple filter to your main component:

const currentStatuses = status
  ? statuses.filter(s => s.statusName !== status)
  : statuses;

return (
  <MainContainer>
    <DropdownContainer>
      <Dropdown
        status={status}
        statuses={currentStatuses}
        handleSelect={handleSelect}
      />
    </DropdownContainer>
  </MainContainer>
);