React Material UI Popup Dialog

React Material UI Popup Dialog

✨ Premium Course on React Hook Form with Material UI

In this video, we will discuss how to create popup/ dialog in react material-ui. to demonstrate how the topic we have opened a form in a material-ui dialog for insert and update operation.

📂 GitHub Repository

💖 Buy me a Coffee

🌀 Related Videos

🔗 Find me in

#MaterialUI #Reactjs #CodAffection

[apoilgun]

Dang I'm trying to do something exactly like this and had been searching for a day to find a similar example. Then I found it out of nowhere.. cheers man!!

[matheson.phillip]

BOOM, thats it!
Many thanks for your contributions. I cant speak highly enough of your content. Beautifully explained and logically coded. I especially appreciate you taking the extra effort to code in such a style that incrementally improves on the components optimizing as you need. Instead of writing a perfect component, you take the time to explain what/how to improve incrementally. I have learned so much for you.
I'll be sure to check out what else you have to offer.
Enjoy a coffee/beer on me ;) Thanks again

[Smegmachin]

"I came searching for copper and found gold". thank you for sharing your knowledge! greetings from Mx!!

[himanshusharma]

this is exactly what I wanted
thank you, sir

[AbrorAyo]

It's the first time I'm clicking on someone's notification bell cuz these videos are AWESOME!!!

[cristiro]

Thank you so much! you explain so well and clear! I've learned a lot from your videos!

[MAKafi-mjiv]

That is really awesome. Thank you, Sir.

[alessiozubiani]

Hi, I have a question. In the addOrEdit function of the Employees component you are able to perform other actions after adding / updating an employee (for example: resetForm, close the popup, etc). In your case, however, the insertion / updating of the employee is all managed synchronously. How can I do to manage the same behavior but using a call to an API? In this case it would be an asynchronous call so I would like to close the popup only after the API has answered me.

Thanks in advance

[alessiozubiani]

For your understanding, I'll tell you I'm using redux to handle API calls. So my doubt would be how to handle the closing of the popup after calling "dispatch (function)" inside the addOrEdit method

[brendonanderson]

Awesome man can you do a Blazor video in the future when you have time

[g.bagiryan]

Hey man, first of all thanks for your videos! I have a question I was hoping you could help me out with. So whenever you submit your form you immediately close it, but what if I have some validation on the back end and I want to close the form only if there are no errors after an async request to the server? How would you do that?

[simsawsnew]

Great Vid. Thanks a lot. .Im getting data from an API and using this tutorial to build my table. Quick question. For the edit button, I'm getting data from an API and passing the data to useForm by setting the record item but its not populating my form. Any suggestions. Thanks

[arihantjain]

Hi brother, great explaination but I am stuck in place of select I am using autocompelete that to 2 autocomplete in the same add/edit form, I cannot prefill the autocompeletes for editing can you please help?

[rajithak]

Here u had used control button , can't it work with bootstrap button. Let me know plz

[RR-lewd]

Instead of inserting data from form and showing, updating, delete from react can I use same operation with api ?

[GeorgeFlorian]

Unfortunately, in MUI v5, useStyles is considered legacy/deprecated.
This example needs some refactoring.
Another way of applying css to paper is by writing `classes={{ paper: 'modal-container' }}`, where `modal-container` is a class defined in an imported css file.

[abhijeetab]

Need your help to design the login page using the material UI

[programmersohel]

How can I create moveable Popup according to your methodology ? Plz, Help me.

[pranav]

what is the font are you using in vscode.

[RR-lewd]

Can we use api instead of hard to this this project?