Custom Modal in React JS With React Portals

React as every other frontend framework renders all components as a tree which simplifies development significantly. But the tasks like rendering popups or modals can be more tricky because we want to render them in body to avoid problems with positioning and overflow. React solves this problem by introducing react-portals. It's a way to render an element outside of you React tree of components and be able to access in directly in the component where you want to render it.
► Download the FREE PDF Now. Pass Your JS Interview with Confidence! ➡️ monsterlessons...
► Join Thousands of Learners! Start My Advanced Courses Today ➡️ monsterlessons...
► Boost Your Knowledge! Read My Popular Blog Posts Here ➡️ monsterlessons...
LOOKING FOR THE VIDEO EDITOR? ➡️ [e-mail]
MOST POPULAR COURSES
► Javascript interview questions ➡️ monsterlessons...
► Typescript interview questions ➡️ monsterlessons...
► React interview questions ➡️ monsterlessons...
► Angular Interview Questions ➡️ monsterlessons...
► Angular Testing ➡️ monsterlessons...
► React Testing ➡️ monsterlessons...
► Building real project with Angular + NgRx ➡️ monsterlessons...
► Building real NestJS API ➡️ monsterlessons...
► Building real fullstack project ➡️ monsterlessons...
► RxJS Crash Course ➡️ monsterlessons...
SERVICES THAT I'M USING
Learn new skills anytime with Skillshare. ➡️ skillshare.eqc...
Build your website effortlessly with Squarespace ➡️ squarespace.sy...
Get fast delivery and Prime Video with Amazon ➡️ www.amazon.com/...
Get affordable domains from Namecheap ➡️ namecheap.pxf....
Protect your privacy with NordVPN today! ➡️ nordvpn.sjv.io...
Ultahost: Fast, reliable hosting for your website. ➡️ ultahost.sjv.i...
CONNECT WITH ME!
► TWITTER - / monster_lessons
► INSTAGRAM - / monsterlessonsacademy
► FACEBOOK - / monsterlessonsacademy
► LINKEDIN - / monsterlessons-academy
► TIKTOK - / monsterlessonsacademy
REFERENCES
► Source code - github.com/mon...
This video is NOT sponsored. Some product links are affiliate links which means if you buy something I'll receive a small commission.

[@MonsterlessonsAcademy]

WATCH NEXT: React Interview Questions and Answers - Dominate Your Next Interview - kzbin.info/www/bejne/r4Kro2elpd-ShJIsi=51b2XP_84GH3q6oF

[@herbertk9266]

Thank you so much, keep making more tutorials you will get tens of thousands of subscribers.

[@MonsterlessonsAcademy]

Thanks! I hope it will happen soon.

[@Programming162]

I like your video very very much you deserved 100 million subscribers really

[@MonsterlessonsAcademy]

Thank you!

[@oncoding4520]

Your content is very good, and very informative and is not very short. usually from a beginner perspective you want something like medium length video in which you get to the point but you cover up also some context to understand the general idea. I have seen some of your videos and i really like it thats why i will subscribe. thank your very much for your effort.

[@MonsterlessonsAcademy]

Awesome! Thank you!

[@dimamarius9791]

Very useful, thanks!

[@MonsterlessonsAcademy]

Glad to hear that!

[@irambarkat661]

hi, this is a nice tutorial and teaches modal in a simple way. but how can we off the scroll of the body. at Present when I am calling the modal I can scroll the content of the body normally there shouldn't be any interaction with the body when the modal is opened. Can you please help me with it?

[@mohammadkhalaf8843]

It helped. Thank you

[@MonsterlessonsAcademy]

You're welcome!

[@andresl.6107]

The video is very informative, I have a doubt: it is possible that this method can also be used to render different modals for when an API(endpoint) is used, as there is a lot of data that requires a modal.

[@MonsterlessonsAcademy]

I would render the same modal container with different content depending on API response.

[@allanimeworld2898]

Which editor are you using sir and can i download it uaing linux

[@MonsterlessonsAcademy]

Vim. Here is a video about it kzbin.info/www/bejne/j6Ovmqidec12q80

[@allanimeworld2898]

Thank you sir

[@allanimeworld2898]

Sir your words were autocompleting sir which pkugin do i need to install

[@RajYadav-yh7vv]

very slow n poor

[@MonsterlessonsAcademy]

Thanks!