title: Get updated state of the component outside the render
body: <p>Sorry, this could be very basic, but I've this sutuation...</p>
  
  <pre><code>class MyComponent extends React.Component {
    constructor () {
    super()
    this.state = {
       selected: -1
    }
  }
  this.list = []
  for (let i = 0; i &lt; myArray.length; i++) {
     let item = &lt;div&gt;selected on this list : {this.state.selected}&lt;/div&gt;
     this.list.push(item)
  }
  render () {
  return (
    &lt;div&gt;selected: {this.state.selected}&lt;/div&gt;
    &lt;div onClick={() =&gt; this.state.selected++}&gt;
      {this.list}
    &lt;/div&gt;
   }
  }
  </code></pre>
  
  <p>This supposed to generate: </p>
  
  <ul>
  <li>selected : -1</li>
  <li>on this list: -1</li>
  <li>on this list: -1</li>
  <li>on this list: -1</li>
  <li>on this list: -1
  ...</li>
  </ul>
  
  <p>Basically all things returning the value of the selected.</p>
  
  <p>But when I click on the div to increment the selected, I'm receiving something like...</p>
  
  <ul>
  <li>selected : 2</li>
  <li>on this list: -1</li>
  <li>on this list: -1</li>
  <li>on this list: -1</li>
  <li>on this list: -1
  ...</li>
  </ul>
  
  <p>and as longs it's updates...</p>
  
  <ul>
  <li>selected : 3,4,5,6,7...</li>
  <li>on this list: -1</li>
  <li>on this list: -1</li>
  <li>on this list: -1</li>
  <li>on this list: -1
  ...</li>
  </ul>
  
  <p>In other words: the values of my list created by the for/loop is always displaying the initial state while the first div inside the render shows the state properly updated.</p>
  
  <p>Any help ? </p>