Pomax / react-onclickoutside

An onClickOutside wrapper for React components
MIT License
1.83k stars 187 forks source link

OCO applies only to last functional component #325

Closed EdPutans closed 5 years ago

EdPutans commented 5 years ago

When multiple functional components are rendered by mapping, the onclickoutside only applies to the last component. This only occurs when defining the component as a stateless function, but works just fine when it's a class component.

Pomax commented 5 years ago

This feels like a consequence of how this HOC works - if you need more than one of these on a page, you're probably not better off with a functional component, and that thing should probably be a class. See https://github.com/Pomax/react-onclickoutside/issues/320 and https://github.com/Pomax/react-onclickoutside/issues/307

jRichardeau commented 5 years ago

Can you update the readme with this ? I lost a couple of hours with it.

Pomax commented 5 years ago

This isn't really specific to this library, though, it's standard JavaScript (not even React): if you have a const Thing and you use that thing as your data handle, then you can set Thing.value a million times, but each time you set it, you destroy what was there before. So as long as you need a true functional component (e.g. one that either has no state at all, or uses a functional state now that there's the useState hook): cool, your code will work fine. But the moment you need instance-based properties, which this HOC already makes abundantly clear it needs, you'll need to write code that creates those instances.

If you want that made even more explicit in the docs, please file an issue on that (and, if you happen to have a good phrasing in mind, feel free to open a PR with the suggested text updated, even if it's not meant as true final text) and we can look at that in its own thread.