Designing a Modal with controlled open state
controlled state plus content injection.
parent owns isOpen and onClose, portal renders content with focus trap, children for static content, render prop when content needs modal state.
What's really being asked
The interviewer wants controlled-component instincts, accessibility awareness for overlays, and a clear grasp of when children suffice versus when a render prop is warranted.
The full answer
Make the Modal controlled: the parent holds the open state and passes isOpen and onClose, so visibility is coordinated with the rest of the app and the parent can close it after an action. The Modal renders its content through a portal so it escapes parent overflow and stacking contexts, traps focus while open, restores focus on close, closes on Escape and backdrop click, and sets ARIA roles like dialog and aria-modal. For content, the children prop is the simplest and most natural way to pass arbitrary markup and reads cleanly for static content. A render prop, where you pass a function receiving modal state such as close, is better when the content itself needs to call modal behavior, for example a form whose submit handler closes the modal, without lifting that callback awkwardly. The tradeoff: children are simpler and more familiar; render props add flexibility at the cost of slightly more complex call sites.
The mistakes people make
Letting the Modal own its open state internally, so parents cannot programmatically open or close it. Skipping focus trapping and Escape handling. Rendering inline rather than via a portal, causing z-index and overflow bugs. Reaching for a render prop when children would do.
What usually comes next
How do you trap and restore focus correctly? How do nested modals or stacking work? When is an uncontrolled modal acceptable?
A concrete example
A parent stores isOpen in state, renders Modal with isOpen and onClose, and passes a confirmation form as children. For a wizard step that must close itself on success, it instead passes a render prop that receives close, so the step calls close after submitting, all while the parent still owns the open state.
Interview question
When is a render prop preferable to the children prop for passing content into a Modal?
- a.When you want the modal to own its open/close state internally
- b.When the content is purely static markup with no interactivity
- c.When the content needs access to modal-provided state, like a close functionCorrect
- d.When you need to render the modal without a portal
Why? this is the answer
A render prop can hand modal state such as close to the content, which is useful for self-closing forms. For static content, the simpler children prop is preferred.
Just read this? Test yourself on what you have been reading.
Read the original → react.dev
- #modal
- #controlled-components
- #render-props
- #react-portal
- #accessibility
Put your scrolling time to good use
Learn one idea, try a quiz and save useful cards for revision. Tezvyn makes it easy to learn and stay current in your tech field, a few minutes at a time.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Every open role lists the topics its interview covers, so you can prepare for the real thing rather than guessing.
See open roles