title: how to create a list with stateful components in react?
body: <p>I'm quite new to react, and I have this problem that when trying to map an array to a list of React stateful component, all my components lose their state. My code:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const { useState, useEffect} = React;
  
  const htmlRoot = document.getElementById('root');
  const reactRoot = ReactDOM.createRoot(htmlRoot);
  
  const App = () =&gt; {
      const Item = (props) =&gt; {
          const [count, setCount] = useState(0);
          useEffect(() =&gt; {
              const timer = setInterval(() =&gt; {
                  setCount((lastCount) =&gt; lastCount + 1);
              }, 1000);
              return () =&gt; clearInterval(timer);
          }, []);
          return &lt;h1&gt;{props.children + ' ' + count}&lt;/h1&gt;;
      };
  
      const arr = [1, 2, 3];
      const [arrState, setArrState] = useState(arr);
      const clickHandler = () =&gt; {
          setArrState((lastArrState) =&gt; [
              ...lastArrState,
              lastArrState.at(-1) + 1,
          ]);
      };
      return (
          // Unfortunately, Stack Snippets don't support the shorthand form
          // of fragments
          &lt;React.Fragment&gt;
              {arrState.map((num, index) =&gt; (
                  &lt;Item key={index}&gt;{num}&lt;/Item&gt;
              ))}
              &lt;button onClick={clickHandler}&gt;Click Me&lt;/button&gt;
          &lt;/React.Fragment&gt;
      );
  };
  
  reactRoot.render(&lt;App /&gt;);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="root"&gt;&lt;/div&gt;
  
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.development.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.development.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Is this even possible for them to keep their state? If it is, how?
  Update:</p>