Build a Toast / Notification System

React

JavaScript

Technical Specification

Create a simple toast system where messages appear at the corner and disappear after a timeout.

Input/Output Samples

Input:Click 'Show Toast'

Output:Toast appears and fades after a few seconds

Optimal Logic Path

import { useState } from "react";

let idCounter = 1;

function ToastDemo() {
  const [toasts, setToasts] = useState([]);

  function addToast(message) {
    const id = idCounter++;
    setToasts((prev) => [...prev, { id, message }]);
    setTimeout(() => {
      setToasts((prev) => prev.filter((t) => t.id !== id));
    }, 3000);
  }

  return (
    <div>
      <button onClick={() => addToast("Saved successfully!")}>
        Show Toast
      </button>
      <div>
        {toasts.map((t) => (
          <div key={t.id}>{t.message}</div>
        ))}
      </div>
    </div>
  );
}

Architectural Deep-Dive

We push a toast into array then schedule its removal after a timeout.