title: React does not re-render when state changes if the control buried in an array
body: <p>I have to generate various controls dynamically according to an xml file. When I add different controls into an array named Items, and then wrap the various control array Items within the dialog control, for example </p>
  
  <pre><code>this.dialogPanelInstance = &lt;Dialog visible={this.state.visible}&gt;{items}&lt;/Dialog&gt;;
  </code></pre>
  
  <p>If I put this.dialogPanelInstance in the render method, the visibility of dialog will be not re-rendered when state.visibile is changed, same as the visibility of the controls within the Items array.</p>
  
  <p>If I write the line directly in the render method</p>
  
  <pre><code>&lt;Dialog visible={this.state.visible}&gt;{items}&lt;/Dialog&gt;
  </code></pre>
  
  <p>The dialog is open and closed reflecting to the Visible state but the visibility of controls within is still not responding to the state.</p>