Q:

How to do a map() with setInterval to simulate linux startup process in ReactJS?

I trying to do an Array.map() with setInterval to render some paragraphs with delay to simulate the startup process of linux, I dont know what is wrong cause my setInterval only render the number 3, can you help me with that? (Sorry for my dangerous english)
I try to do that in a react^16.8.6 (web app) 
const InitialLoading = (props) => {
    const status = [
        'Sed ut perspiciatis unde omnis iste natus error',
        'Nemo enim ipsam voluptatem quia voluptas',
        'Ut enim ad minima veniam, quis nostrum',
        'Quis autem vel eum iure reprehenderit'
    ]    

    return <div>
        {setInterval(() => status.map(e => <p>{e}</p>), 5000)}
    </div>
}

A:

This is by no means an ideal solution, but your question got me thinking about how to do this using promises. It ended up being quite a fun challenge so I thought I'd share my results with you 
const InitialLoading = () => {
  const initialStatus = [
    "Sed ut perspiciatis unde omnis iste natus error",
    "Nemo enim ipsam voluptatem quia voluptas",
    "Ut enim ad minima veniam, quis nostrum",
    "Quis autem vel eum iure reprehenderit"
  ];

  // Create array of promises that each resolve 1 second apart
  const promises = initialStatus.map((line, index) => {
    return new Promise(resolve => {
      setTimeout(() => {
        resolve(line);
      }, (index + 1) * 1000);
    });
  });

  // Create new empty array where we will add our resolved promises
  const [lines, setLines] = useState([]);

  useEffect(() => {
    // Create async function that iterates over the promises
    // Once a promise is resolved it gets added to the new array
    // Each time setLines() is called, the DOM is updated with the new array
    const printLines = async () => {
      for (let promise of promises) {
        const line = await promise;
        setLines(lines => [...lines, line]);
      }
    };
    // Call async function
    printLines();
    // Empty array as second argument to force useEffect to only run once
  }, []);

  return (
    <div>
      {lines.map((line, i) => (
        <p key={i}>{line}</p>
      ))}
    </div>
  );
};

And here is another solution to your problem without using promises:
const InitialLoading = () => {
  const [lines, setLines] = useState([]);

  const status = [
    "Sed ut perspiciatis unde omnis iste natus error",
    "Nemo enim ipsam voluptatem quia voluptas",
    "Ut enim ad minima veniam, quis nostrum",
    "Quis autem vel eum iure reprehenderit"
  ];

  useEffect(() => {
    status.forEach((line, index) => {
      setTimeout(() => {
        setLines(lines => [...lines, line]);
      }, (index + 1) * 2000);
    });
  }, []);

  return (
    <div>
      {lines.map((line, i) => (
        <p key={i}>{line}</p>
      ))}
    </div>
  );
};

