Official Solution
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>
);
}
No comments yet. Start the discussion!