Frontendx
README.md
SOLUTION.md
main.tsxentry
App.tsx
App.css
index.html
vite.config.ts
Installed
react@^19.2.0
react-dom@^19.2.0

Create Modal with Priority in React — Priority-Based Modal System Using Render Props Pattern Where Higher Priority Auto-Closes Others

Prompt

Design and implement a modal component using any UI framework with an advanced priority mechanism. The modal supports primary and secondary action buttons (Save/Cancel), an optional close (X) icon, and a configurable priority level (number). When a new modal with a higher priority is opened it must automatically close all currently open modals with lower priority. Use the Render Props Pattern to expose modal creation via a method rather than JSX rendering, so the content is passed as a prop to the factory. The modal component has a consistent UI shell (header, body, footer with buttons) while the content is injected via render props. This was asked in Uber's L4 (SDE2) frontend interview.

Create a ModalContext that maintains an array of open modals with their priorities and content.
Test Results

Create Modal with Priority in React — Priority-Based Modal System Using Render Props Pattern Where Higher Priority Auto-Closes Others

Design and implement a modal component using any UI framework with an advanced priority mechanism. The modal supports primary and secondary action buttons (Save/Cancel), an optional close (X) icon, and a configurable priority level (number). When a new modal with a higher priority is opened it must automatically close all currently open modals with lower priority. Use the Render Props Pattern to expose modal creation via a method rather than JSX rendering, so the content is passed as a prop to the factory. The modal component has a consistent UI shell (header, body, footer with buttons) while the content is injected via render props. This was asked in Uber's L4 (SDE2) frontend interview.