title: setState not triggering a re-render when data has been modified
body: <p>Just started working with React, and it's been going relatively smooth up until this point.</p>
  
  <p>I have a list, that contains X pre-defined items, which means that the list is always rendered with a given amount of rows.</p>
  
  <p>This data is collected from a REST API, prior to the list rendering. The data contains variables relating to the list, as well as an array that contains each item within the list.</p>
  
  <p>I chose the easy route, so I populate every component with a single JSON object named 'data', that contains everything necessary.</p>
  
  <p>Rendering the list looks something like this: </p>
  
  <pre><code>&lt;MyList data={data} /&gt;
  </code></pre>
  
  <p>Then, in the getInitialState of MyList:</p>
  
  <pre><code>dataInt: this.props.data.dataInt || 0,
  dataStr: this.props.data.dataStr || '',
  rows: this.props.data.rows || []
  </code></pre>
  
  <p>So I store my array of items (JSON) in the initial state of the list (parent), and when I choose to render the list, I first create all components (children) in an array, like this:</p>
  
  <pre><code>var toRender = [];
  for(i = 0; i &lt; this.state.rows.length; i++) {
      toRender.push(&lt;ItemRow data={this.state.rows[i]} /&gt;);
  }
  </code></pre>
  
  <p>and then I render like this:</p>
  
  <pre><code>return (
      &lt;div className="item-container"&gt;
          &lt;table className="item-table"&gt;
              {toRender}
          &lt;/table&gt;
      &lt;/div&gt;
  );
  </code></pre>
  
  <p>The render-function of MyItem look something like this:</p>
  
  <pre><code>return (
      &lt;tr&gt;
          &lt;td&gt;{this.state.dataFromItem}&lt;/td&gt;
      &lt;/tr&gt;
  );
  </code></pre>
  
  <p>Now, let's say I want to modify the child data from within the parent, with some new data I just got from the API. Same structure, just the value of one field/column has changed:</p>
  
  <pre><code>i = indexOfItemToBeUpdated;
  var newRows = this.state.rows;
  newRows[i] = data; // New JSON object with same keys, different values.
  this.setState({ rows: newRows }); // Doesn't trigger re-render
  this.forceUpdate(); // Doesn't trigger re-render
  </code></pre>
  
  <p>What am I doing wrong? </p>
  
  <p>At first I thought it was because I was wrapping the render function of MyItem in a , but since it renders perfectly fine on the initial render, I will assume that  is an acceptable wrapper.</p>
  
  <p>After some testing, it seems that the parent view is re-rendered, but not the children (which are based on the data that is updated within the parent).</p>
  
  <p>JSfiddle: <a href="https://jsfiddle.net/zfenub6f/1/" rel="noreferrer">https://jsfiddle.net/zfenub6f/1/</a></p>