title: Can't update state from inside content array React
body: <p>I have a list of elements in a state variable in React which I want to render. They have a callback passed within them which sets some state on the component. It seems this callback runs when invoked from the child, however, the state does not get updated in the parent. The code is like this:</p>
  <pre><code>setContent(
    someFunction(res)
      .map(item =&gt;
        &lt;Item
          key={item.toString()}
          toggleOpen={() =&gt; {
            console.log(myState)
            setMyState(!myState)
          }}
        /&gt;
      ),
  )
  </code></pre>
  <p>If I embed this list directly into the return JSX (i.e. I don't use my <code>content</code> state variable, then it works as expected.</p>
  <p>Codepen example: <a href="https://codepen.io/darajava/pen/NWbRYOZ?editors=0010" rel="nofollow noreferrer">https://codepen.io/darajava/pen/NWbRYOZ?editors=0010</a></p>
  <p>EDIT: If you notice the difference between the console.log and the actual state value being displayed in the interface, you'll see that the hook is actually working. The problem was not as I described, but is actually the <em>component</em> does not receive updated state values.</p>