Simple Portal Toast

Simple Portal Toast

Hard ReactJS Hooks & Effects 31 views
Explanation Complexity

Problem Statement

Create a Toast that renders at the end of body using createPortal.

Input Format

No input.

Output Format

Render a React component.

Constraints

Use react-dom createPortal.

Input / Output Format

Input Format
No input.
Output Format
Render a React component.
Constraints
Use react-dom createPortal.

Examples

Input:
Output:
(React code)

Example Solution (Public)

ReactJS 
import React, { useEffect, useState } from 'react';
import { createPortal } from 'react-dom';

function Toast({ open, message }) {
  if (!open) return null;
  return createPortal(
    <div style={{ position: 'fixed', left: 16, right: 16, bottom: 16, maxWidth: 520, margin: '0 auto', background: '#111', color: '#fff', padding: '12px 14px', borderRadius: 14 }}>
      {message}
    </div>,
    document.body
  );
}

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

  useEffect(() => {
    if (!open) return;
    const t = setTimeout(() => setOpen(false), 1200);
    return () => clearTimeout(t);
  }, [open]);

  return (
    <div style={{ padding: 16 }}>
      <button type='button' onClick={() => setOpen(true)} style={{ padding: '10px 14px', borderRadius: 12, border: 0, background: '#0b5', color: '#fff' }}>
        Show toast
      </button>
      <Toast open={open} message='Saved on meetcode.' />
    </div>
  );
}

Official Solution Code

import React, { useEffect, useState } from 'react';
import { createPortal } from 'react-dom';

function Toast({ open, message }) {
  if (!open) return null;
  return createPortal(
    <div style={{ position: 'fixed', left: 16, right: 16, bottom: 16, maxWidth: 520, margin: '0 auto', background: '#111', color: '#fff', padding: '12px 14px', borderRadius: 14 }}>
      {message}
    </div>,
    document.body
  );
}

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

  useEffect(() => {
    if (!open) return;
    const t = setTimeout(() => setOpen(false), 1200);
    return () => clearTimeout(t);
  }, [open]);

  return (
    <div style={{ padding: 16 }}>
      <button type='button' onClick={() => setOpen(true)} style={{ padding: '10px 14px', borderRadius: 12, border: 0, background: '#0b5', color: '#fff' }}>
        Show toast
      </button>
      <Toast open={open} message='Saved on meetcode.' />
    </div>
  );
}
Please login to submit solutions.
Editor
Output

                                        

                                    

                                    

                                        

                                                                                    
Please login to submit solutions.