boxes and useEffect

App.tsx

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

interface ChatProps {
  idx: number;
}

async function wait(sec: number): Promise<void> {
  return new Promise((resolve) => {
      setTimeout(resolve, sec * 1000);
  });
}

const Box: React.FC<ChatProps> = ({ idx }) => {
  const [message, setMessage] = useState<string>(`${idx} loading...`);

  useEffect(() => {
    (async () => {
      await wait(1);
      const newMessage = `${idx * 3} message`;
      setMessage(newMessage);
    })();
  }, [idx]);

  return (<div> {message} </div>)
};

let count = 0;

function App() {
  const [boxes, setBoxes] = useState<React.ReactElement[]>([]);
  const [flag, setFlag] = useState(true);

  const addBox = (): void => {
    setBoxes([...boxes, <Box idx={count++} />]);
  }

  return (
    <div className="App">
      <button onClick={addBox}>add</button>
      <button onClick={() => setFlag(!flag)}>toggle</button>
      {flag?boxes:""}
    </div>
  );
}

export default App;