title: Rendering arrays using .map that contains state variables - not updating
body: <p>I have an array that I am rendering on the render() function. Each element in the array is a HTML element that has state variables that I need to  display, the HTML are displaying correctly, but the internal state variables do not update even when the rendering is happening</p>
  
  <pre><code>state = {
   array: [],
   id: 2
  }
  
  updateState() {
   this.setState({id: 4})
  }
  
  componentDidMount(){
   array = [&lt;div&gt; {this.state.id} &lt;/div&gt;, &lt;div&gt; {this.state.id} &lt;/div&gt;]
  }
  
  render() {
   {this.state.array.map(el =&gt; return el)}
  
   //assume something happens here that triggers updateState() multiple times: buttons presses, etc
  }
  
  </code></pre>
  
  <p>I never see 4, it re renders but keeps the old value 2</p>