2

I'm trying to implement something that should allow me to manipulate some modals (using react-modal) more easily. I see a lot of library out there that handle modals in a very simple way, with callback, promises etc... like vex or sweet alert

So far I did not find any way of doing this in a simple way with react. I see a lot of solution which require to write a modal reducer and intercept what you want inside componentWillReceiveProps but I feel like it's a bit heavy.

So far I got to this

https://codesandbox.io/s/l24r14pxp7

I'm using a hoc to pass datas and functions inside my component. I like this method because all the modal logic can stay at the same place, and as react-modal use portals, they are defined within the relevant component.

But I feel like it's a bit "dirty" to store functions directly inside a state. How do you feel about this ? Should I do it in a different way ?

Tnargib
  • 73
  • 12
  • Generally I just prefer to handle the show/hide modal by just using a boolean variable in state. I do suggest checking out the bootstrap modal example here: https://react-bootstrap.github.io/components/modal/ . A simple turnary operator will usually do the trick `(this.state.show)?(
    ): null`     – Michael Sorensen Jun 19 '18 at 00:57
  • This is how I used to manage my modals. But It gets redundant when you have a lot of them. My goal here would be to have only one function that open the modal then get the result inside a callback so it get more simple – Tnargib Jun 19 '18 at 07:47

0 Answers0