DEV Community

How to Create a Modal in React

Francisco Mendes on August 21, 2021

One of the most used components in React is undoubtedly modals because they can be used in different contexts, from messages to user input. Like m...

Read full post

Ra-el Peters • Aug 3 '22 • Edited

Thanks for this tut it was supper useful.

One thing I noticed, at least on my setup, the .darkBG style leaves 1px line not darkened on the top and left side of the browser client area. This is dependent on the size of the window as resizing can make it go away.

I simplified the .darkBG style and this went away for me:

.darkBG {
  background-color: rgba(0, 0, 0, 0.2);
  width: 100vw;
  height: 100vh;
  z-index: 0;
  top: 0;
  position: absolute;
}

hope this helps

Bikas Vaibhav • Aug 22 '21

You should consider portals (reactjs.org/docs/portals.html) for modal as it scopes it out of usual DOM structure including its events.

Francisco Mendes • Aug 22 '21 • Edited

I considered using it, but since I don't have other elements that use z-index like notifications and toasts, I decided to take a simpler approach. But if I had one of the ones mentioned before, I wouldn't hesitate to use Portals. 😎

Thanks for the comment, it is quite relevant. 🙌

Priya Pandey • May 17

can you tell me if the above solution works which I also did in my practice setup, why would we go for portals instead?

Sattwik Sahu • Aug 21 '21 • Edited

If you increase the padding a little bit and decrease the border-radius on the modal and buttons (about 6-7px) it will look even more sleek. Considering it being a React tutorial, mainly, you actually went ahead to discuss the styling; it won't hurt to beautify it a little bit more 😉

Francisco Mendes • Aug 21 '21

Thanks for the tip and feedback! 👊

John Small • Jan 6 '22

I'm puzzled by the nameless tag <>....</> introduced in step 7

I'm just starting React so it could be some special React syntax I've not learned about yet. It's not something I've ever encountered in HTML.

Can someone explain that one please.

DΛVΞ • Jan 9 '22 • Edited

Dear John, the <>...</> tag is a 'reference' tag. React needs a binding start and close tag so if you want to push < img src={background.image} alt='alternative info'. / > in a return this would cause an error. To overcome this an empty set of tags is used.

I hope this explains the tag.
kind regards,
David Verhage

Alex Trost • Jan 20 '22

The term you're looking for is Fragment
reactjs.org/docs/fragments.html

Dennis Groß (he/him) • Aug 21 '21

I like the design of your modal. Looks very modern but simple.

Francisco Mendes • Aug 21 '21

Thanks so much for the feedback! 🙏 It's the small details that make the difference 💪

Dennis Groß (he/him) • Aug 22 '21

I also noticed that design is about the details like spacing, font, composition...

That was just not so obvious for me before because I have been more of a backend developer.

Hung Nguyen • Aug 22 '21

Did great job, man 👌Thanks a lot.

Francisco Mendes • Aug 22 '21

Glad to know! 😊 Thanks!

Darshan Dhabale • Apr 17 '22

I am worried about all the rerendering that is going to happen in the parent component
You are storing the open/close modal state up in the parent, if you update it, the whole parent re-renders