Simple Modal Without Libraries

Simple Modal Without Libraries

Medium ReactJS State Management 24 views
Explanation Complexity

Problem Statement

Create a basic modal UI using conditional rendering and a backdrop.

Input Format

No input.

Output Format

Render a React component.

Constraints

Clicking backdrop closes the modal.

Input / Output Format

Input Format
No input.
Output Format
Render a React component.
Constraints
Clicking backdrop closes the modal.

Examples

Input:
Output:
(React code)

Example Solution (Public)

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

function Modal({ open, title, onClose, children }) {
  if (!open) return null;

  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 }}>{children}</div>
      </div>
    </div>
  );
}

export default function App() {
  const [open, setOpen] = useState(false);

  return (
    <div style={{ padding: 16 }}>
      <button type='button' onClick={() => setOpen(true)} style={{ padding: '10px 14px', borderRadius: 12, border: 0, background: '#0b5', color: '#fff' }}>
        Open modal
      </button>
      <Modal open={open} title='meetcode' onClose={() => setOpen(false)}>
        <p style={{ margin: 0 }}>Practice a little every day.</p>
      </Modal>
    </div>
  );
}

Official Solution Code

import React, { useState } from 'react';

function Modal({ open, title, onClose, children }) {
  if (!open) return null;

  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 }}>{children}</div>
      </div>
    </div>
  );
}

export default function App() {
  const [open, setOpen] = useState(false);

  return (
    <div style={{ padding: 16 }}>
      <button type='button' onClick={() => setOpen(true)} style={{ padding: '10px 14px', borderRadius: 12, border: 0, background: '#0b5', color: '#fff' }}>
        Open modal
      </button>
      <Modal open={open} title='meetcode' onClose={() => setOpen(false)}>
        <p style={{ margin: 0 }}>Practice a little every day.</p>
      </Modal>
    </div>
  );
}
Please login to submit solutions.
Editor
Output

                                        

                                    

                                    

                                        

                                                                                    
Please login to submit solutions.