Hi there everyone, this is a quick review about how to use Modals Components in your React project combining Hooks, Context, and Portals. You need ...
For further actions, you may consider blocking this person and/or reporting abuse
Hi Alex. Excellent tutorial which has helped me alot and I have a follow up question
I'm wanting to close the modal using a button nested inside of modalContent passed to handleModal.
How would I go about this?
I have tried using handleModal for the onClick of the button but nothing happens.
This may be a hole in my knowledge
Done Rhys, article updated!
Hi there Rhys sorry for the late response, let's revamp the article to show that use case, I will address that part in a section with you question
Hello,
First of all, apologies for commenting on a post from over a year ago and if you're still active here, then thank you.
I am wondering how to go about implementing the scenario where state needs to be shared between the modal and component from where it's rendered. I somehow need a way to re-render the modal if a prop changes
This is a codesandbox of a simple example: codesandbox.io/s/unruffled-newton-...
I will keep this question updated on how I get along with trying to find a clean solution
Hi, nice article. But in the old version of the react documentation it is not recommended to save the components in the state. What do you think about it?
Hi there Stepan, thanks for sharing, yes as you mentioned that's old but true!! I will not do it, in this case, this is just a quick example of how to solve a use case without fully refactoring the context, but you are totally right!! states = data.
Here's a similar implementation: github.com/eBay/nice-modal-react
Hi, excellent job. But i get stoked when i wanted to open a modal after some other action besides the clicking, for example if i want to open a pop up modal on page ready.
it can be done?
Done Joel article updated
Hi there Joel sure you can, let me revam article and we can address that use case!
Hello, i'm trying to use this. But with eslint no-cycle, i can't use this pattern, because there Modal import in context, and context import in Modal.
How can i use this approach without moving Modal inside provider?
Just tried and it doesnt seem to work with a controlled textbox component. Can you add a textbox where the parent holds the state?
Very good explanation, thanks !