Designing a Modal with controlled open state

WHAT THIS TESTS 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.

A GOOD ANSWER COVERS 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.

COMMON WRONG ANSWERS 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.

LIKELY FOLLOW-UPS How do you trap and restore focus correctly? How do nested modals or stacking work? When is an uncontrolled modal acceptable?

ONE 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.