Modal Stack Manager

Modal Stack Manager

Hard ReactJS State Management 30 views
Explanation Complexity

Problem Statement

Open multiple modals and close the top one first.

Input Format

No input.

Output Format

Render a React component.

Constraints

Keep an array stack of modals and pop on close.

Input / Output Format

Input Format
No input.
Output Format
Render a React component.
Constraints
Keep an array stack of modals and pop on close.

Examples

Input:
Output:
(React code)

Example Solution (Public)

ReactJS 
import React, { useState } from 'react';

function Modal({ title, onClose }) {
  return (
    <div
      role='dialog'
      aria-modal='true'
      aria-label={title}
      onMouseDown={(e) => { if (e.target === e.currentTarget) onClose(); }}
      style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.35)', display: 'grid', placeItems: 'center', padding: 16 }}
    >
      <div style={{ width: 'min(92%, 420px)', borderRadius: 16, background: '#fff', padding: 16 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <strong>{title}</strong>
          <button type='button' onClick={onClose} style={{ border: 0, background: 'transparent', fontSize: 18 }}>×</button>
        </div>
        <div style={{ marginTop: 12, color: '#555' }}>This modal is part of a stack.</div>
      </div>
    </div>
  );
}

export default function App() {
  const [stack, setStack] = useState([]);

  function open() {
    setStack((prev) => [...prev, { id: Date.now(), title: 'meetcode modal ' + (prev.length + 1) }]);
  }

  function closeTop() {
    setStack((prev) => prev.slice(0, -1));
  }

  const top = stack[stack.length - 1];

  return (
    <div style={{ padding: 16 }}>
      <h2 style={{ marginTop: 0 }}>Modal stack</h2>
      <button type='button' onClick={open} style={{ padding: '10px 14px', borderRadius: 12, border: 0, background: '#0b5', color: '#fff' }}>Open modal</button>
      <div style={{ marginTop: 10, color: '#555' }}>Open modals: {stack.length}</div>
      {top ? <Modal title={top.title} onClose={closeTop} /> : null}
    </div>
  );
}

Official Solution Code

import React, { useState } from 'react';

function Modal({ title, onClose }) {
  return (
    <div
      role='dialog'
      aria-modal='true'
      aria-label={title}
      onMouseDown={(e) => { if (e.target === e.currentTarget) onClose(); }}
      style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.35)', display: 'grid', placeItems: 'center', padding: 16 }}
    >
      <div style={{ width: 'min(92%, 420px)', borderRadius: 16, background: '#fff', padding: 16 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <strong>{title}</strong>
          <button type='button' onClick={onClose} style={{ border: 0, background: 'transparent', fontSize: 18 }}>×</button>
        </div>
        <div style={{ marginTop: 12, color: '#555' }}>This modal is part of a stack.</div>
      </div>
    </div>
  );
}

export default function App() {
  const [stack, setStack] = useState([]);

  function open() {
    setStack((prev) => [...prev, { id: Date.now(), title: 'meetcode modal ' + (prev.length + 1) }]);
  }

  function closeTop() {
    setStack((prev) => prev.slice(0, -1));
  }

  const top = stack[stack.length - 1];

  return (
    <div style={{ padding: 16 }}>
      <h2 style={{ marginTop: 0 }}>Modal stack</h2>
      <button type='button' onClick={open} style={{ padding: '10px 14px', borderRadius: 12, border: 0, background: '#0b5', color: '#fff' }}>Open modal</button>
      <div style={{ marginTop: 10, color: '#555' }}>Open modals: {stack.length}</div>
      {top ? <Modal title={top.title} onClose={closeTop} /> : null}
    </div>
  );
}
Please login to submit solutions.
Editor
Output

                                        

                                    

                                    

                                        

                                                                                    
Please login to submit solutions.