React Dialogs (the right way)

[@lvekua]

Practical and powerful. Awesome stuff Chris!

[@CodinginPublic]

Glad you liked it!

[@pastafarian7]

I’ve been using some regular html dialogs in a react app, and I think that does work as long as you don’t need to re-render anything while it’s open (eg I have an instructions dialog with static content that you can open and close). But if the content changes re-renders break that approach I think, at least for modal dialogs, which is what I want. Thanks for teaching me the right way to do it.

[@MrTaekbeen]

I wish I knew this sooner! Great content :)

[@CodinginPublic]

Glad you enjoyed it!

[@steveca057]

Always a huge help Chris, cheers

[@CodinginPublic]

So glad to hear, my friend!

[@K.Huynh.]

Thank for shaing! I will try this.

[@CodinginPublic]

Have fun!

[@_ash64]

Will try this out Chris!

[@Pareshbpatel]

React Dialogs that use the Dialog HTML Element, so clearly explained. Thanks, Chris. {2024-03-20} - Subscribed! , {2024-03-22}

[@CodinginPublic]

Glad it was such a help!

[@7doors847]

Very helpful. Looking forward to the Astro course. Could you do a video on Astro 4.0 sharing your thoughts?

[@CodinginPublic]

Astro course is live (well, early access is live) here: learnastro.dev! I may still do a 4.0 video. There's not a lot user-facing, so I didn't. My guess is I'll do individual videos on the features :)

[@OrcanArtz]

Absolute hero!

[@CodinginPublic]

Glad you liked it!

[@kafin3504]

Great videos! Thanks for making this! btw does this dialogue element is more superior than react portal?

[@CodinginPublic]

I wouldn't say superior, but anytime I can use native elements, I prefer them because they're built-in and accessible by default. Something as established as React portal will be good, too, but I just prefer to use the web platform when it's an option.

[@trollocat]

excellent

[@artem_zakharchuk]

Cool explanation!) Thank you) But you forgot to explain how useImperativeHandle relates to the dialog)

[@CodinginPublic]

Hmm…I haven't heard of that? Is that built into React?

[@godofwar8262]

Thank for react video 🎉

[@CodinginPublic]

You’re welcome! Hope it was a help!

[@sweetink4453]

Yeah, that was great video

[@CodinginPublic]

Glad you enjoyed it

[@matheuspombeiro1675]

Thank you very much

[@CodinginPublic]

You’re welcome!

[@sweetink4453]

That was great video

[@CodinginPublic]

So glad you enjoyed it!

[@dojoisdead]

Omg ty so much!

[@CodinginPublic]

You’re welcome!

[@alisherzaitov]

Hey Chris! So cool you’ve finished your course, insta purchase. However I would’ve missed it if I had not check a spam folder. An announcement on the channel will be handful. Also the link in the channel info tab will be useful (cause since that was a letter from the spam folder I wanted to find a legit link on your channel, found it under one of the videos dedicated to Astro.) I’ll send you a feedback on the course soon🫶

[@CodinginPublic]

Good feedback, thanks! I don't want to spam everyone constantly about the course, but I do have some idea for future promotion of the course. Thanks for the feedback. Hope you love the course!

[@alisherzaitov]

@@CodinginPublic love it already, you are teaching in a right pace.. right for me.

[@pinholeopinho]

Thank you!!!!!!!!!!!!!!!!!!!!!

[@CodinginPublic]

You're welcome!!

[@sashaBejenari]

Thx!

[@CodinginPublic]

You’re welcome!

[@santiago.dev96]

Why would you need access to the dialog DOM element ref? Isn't just better to have the ref defined directly in the Dialog component and use a prop to open/close the dialog for all the components that want to use the Dialog component in their return value? I think that having direct access to the ref in the parent component is kind of useless.

[@davidc872]

you need to close the dialog in the parent component (where the buttons are defined) so the parent component needs to have access to the ref so it can use it in the toggleDialog function, so no you can't define the ref or the toggleDialog in the dialog component because the parent component that renders this dialog needs to have access to it.

[@skl9942]

The dialog functions, showModal() and close() are not only toggling open on the dialog element. You dont get the same functionality with a isOpen prop

[@kyung.lee.official]

This might not be the "right way". If you have states in a dialog, you probably want to clear them after closing it -- setting states to the default values one by one before calling the"close" function is ugly. I know what you're thinking, use a state to destroy the dialog, like "showDialog && ", unfortunately this will cause the dialog not showing up on iPhone😢, it works perfectly on Windows and Android though.

[@MikeMcElroy]

This is the first mention I've seen of anyone even trying conditional rendering of the dialog element, and why it might be problematic. Is there any more information on it? Like, what causes this particular problem for iPhone? Is it documented anywhere? I personally hate `ref`s, so I'm surprised to see everyone using them to manage their modal when they could just be using conditional rendering. I guess I'll find out as I try to develop my own dialog element modal implementation in React without refs.

[@DioArsya]