title: How to increment state count in mapping function?
body: <p>Goal is to increment the count in the mapping function while keeping track of the new value in state. "charlie" isn't updating, even on re-renders of the component, and subsequent runs of mapData. Meanwhile, every re-render/run of mapData continues to print the updated count outside "charlie".
  My code looks roughly like this:</p>
  
  <pre><code>const [data, setData] = useState([])
  const [count, setCount] = useState(0)
  
  const mapData = (apiData) =&gt; {
    const dataMapped = apiData.map((pic, index) =&gt; {
      return (
        setCount(prevState =&gt; (prevState+1))
        &lt;div className="charlie"&gt;{count}&lt;/div&gt; 
      )
    })
    setData(prevState =&gt; ([...prevState, ...dataMapped]))
  }
  
  return {
    &lt;div&gt;
      &lt;div&gt;{count}&lt;/div&gt; {/* shows updated count every render */}
      &lt;div&gt;{data}&lt;/div&gt;  {/* shows 0 every render*/}
    &lt;/div&gt;
  }
  </code></pre>