Build Modal Component With React

[@tgani96]

sorry , wasted 25 min . Current Modal is totally not reusable due to you changing the opacity the actually it should not render in DOM and changing opacity means you can still select it even you dont see it , modal overlay should be inside the modal component not outside, you should consider using React Portal to make Modal bcs it will get position from closest relative and if u have element with relative position it will break all the behavior

[@mohamedali9249]

Right, this is not the we work with modals , changing the opacity made it unusable

[@codaid3121]

Super tuto. Just one thing, I think its better use the condition to show modal. Because even opacity its defined at 0, it always on screen. And it could be a problem if you use it in a component who people use the keyboard to navigate (press tab). If you use: const [show, setShow] = useState(false); { show && } For the performance its better. Sorry for my english 😉

[@carloscardoso9383]

Thanks Very Much. Helped me a lot. Great Job.

[@moorzymoores]

Superb tutorial. 5/5

[@JoaoVictor-ye9vn]

hey man, ty from brazil, great job!!!

[@CandDev]

Obrigado😁

[@ekeneidiagbor4678]

Thanks so much for this great content.

[@iAmiina]

Thank you so much! So helpful

[@markleodionisio2669]

Thanks brothrr

[@lekkyjayz6294]

It seems the transition does not work when you close the modal. It closes faster than it opens. Why is that???

[@davidernesto7912]

Tanks bro, it helps me a Lot

[@zaritzki]

hello, do you have video if the modal is in another component?

[@kanhaiyakmr]

thanks bro

[@raselhossain8855]

If i click outside the model it's will be colse. How can i add this functionality?

[@azure6320]

Keren bang, saya mau nanya, itu modalnya ngambil space ga bang? Kan disana saya lihat ngubah opacity dari 1 ke 0. Jadi jika ada sebuah component atau misal h1 dibawah button open modal apa dia ngambil space sebesar modal?

[@CandDev]

dikasus ini ya ngambil space, tapi bisa diakalin dengan style css untuk .modal-wrapper ditambah position: absolute aja, dan diatur ke center component nya.