How to close multiple dropdown in reactjs when click outside

Question

I create custom dropdowns and handle through states in react.js
I used the below link code when I apply for two dropdowns then it's not working 
When I apply on two dropdowns the 2nd dropdown value is changed and 1st dropdown value is not changeable

This is working on single dropdown but in multiple dropdown not working How to close multiple dropdowns when clicking outside in reactjs

https://stackoverflow.com/questions/32553158/detect-click-outside-react-component

score 0 · Answer 1 · answered Nov 08 '22 at 16:47

Without seeing your code, it is difficult to determine how to answer your question.

Your dropdowns are presumably controlled by state within the component. Something like this?

const Dropdown = () => {
  const [open, setOpen] = useState(false);

  ...
}

Then you have a parent component rendering the dropdowns.

const Parent = () => {
  return (
    <>
      <Dropdown />
      <Dropdown />
    </>
  )
}

Since the state is held within the components, we can't modify both at once. The solution is to lift state.

const Dropdown = ({ open }) => {

  ...
}

const Parent = () => {
  const [openDropdowns, setOpenDropdowns] = useState({});
}

How to close multiple dropdown in reactjs when click outside

1 Answers1