title: React nested map sequential render with setTimeout
body: <p>My goal is to loop through an array of characters and end on each letter of a given word. My code is currently displaying all of these elements at once, but I want them to display sequentially. Here's what I currently have:</p>
  <p><a href="https://i.stack.imgur.com/ubEzW.gif" rel="nofollow noreferrer">Current view</a></p>
  <p>I'd like to return the array that ends with <em>h</em>(wait a few moments), array that ends with <em>e</em> (wait a few moments), and so on. I can't figure out to to attach the arrayIndex to the nested map though.</p>
  <p><code>DisplayName.js</code></p>
  <pre><code>import React, { useState, useEffect } from &quot;react&quot;;
  
  const DisplayName = ({ characters, first }) =&gt; {
    const [charIndex, setCharIndex] = useState(0);
    const [arrayIndex, setArrayIndex] = useState(0);
    
    let arrayContainer = [];
  
    first.map((letter, i) =&gt; {
      arrayContainer.push([]);
      arrayContainer[i].push(characters.concat(first[i]));
      return arrayContainer;
    });
  
  // I can't figure out how to attach arrayIndex here. I am
  // also not using j currently, but kept it for now in case I need
  // a key for the return statements.
    const fullList = arrayContainer.map((letterArr, j) =&gt; {
      return letterArr.map(char =&gt; {
          return (char[charIndex])
        })
    });
  
    useEffect(() =&gt; {
      let timer;
      let secondTimer;
  
      if (charIndex &lt; characters.length) {
        timer = setTimeout(() =&gt; {
          setCharIndex(charIndex + 1)
        }, 75)
      }
  
      if (arrayIndex &lt; first.length - 1) {
        secondTimer = setTimeout(() =&gt; {
          setArrayIndex(arrayIndex + 1)
        }, 75)
      }
  
      return () =&gt; {
        clearTimeout(timer);
        clearTimeout(secondTimer);
      };
    }, [charIndex, characters, arrayIndex, first]);
  
    return (
      &lt;div&gt;{fullList}&lt;/div&gt;
    )
  };
  
  export default DisplayName;
  </code></pre>
  <p><code>App.js</code></p>
  <pre><code>import React from 'react';
  import DisplayName from './DisplayName';
  import './App.css';
  
  function App() {
      const first = 'hello'.split('');
      const funChars = [
        '⏀', '⎷', '⌮', '⋙', '⊠', '⎳', '⍼',
       '⍣', '╈', '╳', '☀', '★', '☍',  'ↂ','▅'];
  
    return (
      &lt;div className=&quot;glow&quot; style={{ minHeight: '100vh'}}&gt;
        &lt;span style={{ letterSpacing: 12}}&gt;&lt;DisplayName first={first} characters={funChars}/&gt;&lt;/span&gt;
      &lt;/div&gt;
    );
  }
  
  export default App;
  
  </code></pre>
  <p>I've also tried something like <code>const [rendered, setRendered] = useState(false);</code> without success, which I tried attaching to the <code>j</code> key.</p>