React Material UI Popup Dialog

🍒 Related Videos
Next Video: • Build Your Own Confirm...
Previous Videos: • React Material UI Tabl...
MERN Stack CRUD: • Complete MERN Stack CR...
React Quiz App with Web API: • Build a React.js Quiz ...
Everyone's favourite way of creating React forms: • React Hook Form - 1. I...
Learn JavaScript in One Video: • JavaScript Beginners T...
🚀 Udemy Course on React Hook Form with Material UI
➤ bit.ly/3WMwro6 (Discount auto-applied)
📂 GitHub Repository
► bit.ly/2DQbFzz
💖 Channel Support
➤ Paypal: bit.ly/3L36ut4
➤ UPI App: geni.us/ScanQR...
➤ Amazon: geni.us/Amazon...
💌 For Business Inquiries
➤ [e-mail]
🚶‍♂️ Follow us
Facebook : / codaffection
Discord : / discord
Twitter : / codaffection
---
React Material UI Popup Dialog
In this video, we will discuss how to create a popup or 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.
#MaterialUI #Reactjs #CodAffection

[@CodAffection]

goo.gl/bPcyXW : Buy me a Coffee bit.ly/3Xq8RPF : Next Part bit.ly/3AG7HX4 : Previous Videos bit.ly/3MkvBrh : React Quiz App with Web API bit.ly/3Me2bxo : Everyone's favourite way of creating React forms bit.ly/3UQdqPZ : Learn JavaScript in One Video bit.ly/2HwIEqF : MERN Stack CRUD

[@Smegmachin]

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

[@CodAffection]

My pleasure!, thanks for the comment, let me know if you've any video suggestion related to react or material ui.

[@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

[@sparkygaming1746]

Thanks the explanation is good, I got to know many things "Here"

[@CodAffection]

Glad to hear that!

[@apoilgun8342]

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!!

[@GeorgeFlorian12]

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.

[@programmersohel]

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

[@meresafarkikahaniya]

Hello sir we love your videos but sir can we have videos on react native please

[@RR-le7wd]

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

[@prabhakarmishra2182]

You are doing a great job but badly, what is missing in your videos is the explanation behind what you do in the video, you explained what you were doing but you did not explain the reason behind doing that, you videos lack this approach, your videos may be good for people who are already familiar with React and other associated technologies but for beginners they are of little use, please change the way you make videos and be more explanatory

[@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?

[@ashraf6850]

Hello sir without scaffolding crud operation banao asp.net MVC EntityFramework please sir

[@cristi92ro]

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

[@CodAffection]

Glad it was helpful!

[@alessiozubiani4717]

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

[@brendonanderson8673]

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

[@arihantjain8347]

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?

[@sims1awsnew685]

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

[@iUmerFarooq]

Connect this application with Firebase?

[@rajithak9415]

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

[@harlequinsamoranos8210]

Does this work now?

[@ShraddhaKatti]

Some one please explain me how to store data in this i want to connect wamp server

[@abhijeetshikharvlog1444]

Can u tell me how to disable past date

[@statusgamers6264]

"The softs in these softs are gonna be sent to the setuper"

[@rangabharath4253]

awesome

[@alessiozubiani4717]

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

[@RR-le7wd]

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

[@pranav5831]

what is the font are you using in vscode.

[@MichelRibeiro187]

how to close the popup when I click outside ?

[@AbrorAyo]

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

[@nemanja084dragicevic4]

If you use @mui/icons-material the property is called sx for every component

[@visakh_vijayakumar_]

Again Bhoooooooooooooom.....Awsome video!! Thanks man..

[@dhruvvarshney1040]

thanks bro I just want the same thing

[@codingwithtony]

Thank u!! I love this video

[@shivarammuthukumaraswamy7164]

Wonderful explanation.Thank you.

[@aleksandrmatyka3118]

Its awesome, man you are genious)

[@abhijeetab6670]

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

[@sofiakartika237]

ini chanel kesukaan temen saya wkwkwk

[@Smkkoding]

thank u sir for the knowladge

[@eitalele7752]

Thank you so much! It helped a lot (:

[@sanjay9970]

Your screen is not seen

[@dijiflex]

This was a perfect video 💯

[@kefamutuma7402]

Suggestion: Responsive side menu? where it closes partially to show only the icons and opens to show the full icon and text

[@paulkitonyi7031]

Hope this is what you are looking for material-ui.com/components/drawers/#mini-variant-drawer

[@patloladeepthi3597]

Please post backend code

[@sainathpatil6893]

you are life saver bro !!!

[@ragnarlothbrok3513]

Thanks for this tutorials..

[@winnyglobal7106]

Please is It possible to get a link to github

[@CodAffection]

It should be these in video description.

[@julianblond]

there will be this example on mui 5?

[@CodAffection]

Not yet. but you can expect in future.

[@himanshusharma1066]

this is exactly what I wanted thank you, sir

[@MAKafi-mj7iv]

That is really awesome. Thank you ,Sir.

[@CodAffection]

Glad you liked it!, let me know if you've any video suggestion regarding react/ material ui?

[@rithikraj1813]

You know your accent is annoying if somebody didn't said that you I'm saying quit it or learn from nice tutorial..... but a productive video though..