title: React.js - re-drawing array after update of item
body: <p>I have state like this:</p>
  
  <pre><code>this.state = {
    items = []
  }
  </code></pre>
  
  <p>State is loaded from REST service, which is working correctly. 
  However later , when user edit one of items in state, I use immutability helper to update state:</p>
  
  <pre><code> const newState = update(this.state, {
              items: {
                  [index]: {$set: newItem}
              }
    });
   this.setState(newState);
  </code></pre>
  
  <p>This will not be re-drawed (render method will pass , but no visible changes are made on page) and I know why:</p>
  
  <p>Because I am creating array to render like this:</p>
  
  <pre><code>render(){
    let itemsrender=[];
    for (let i in this.state.items){
        let line="";
        if (i&lt;this.state.items.length-1) line=&lt;div className="row line"&gt;&lt;/div&gt;;
              atcrender.push(
                  &lt;div key={this.state.item[i].id}&gt;
                      &lt;div className="row" &gt;
                          &lt;ITEM
                            item={this.state.items[i]}
                            onUpdate={this.onUpdate}
                            onDelete={this.onDelete}
                          /&gt;
                      &lt;/div&gt;
                      {line}
                  &lt;/div&gt;
              )
          }
    return(
     &lt;div&gt;{itemsrender}&lt;/div&gt;
    );
  
  }
  </code></pre>
  
  <p>If I can not edit render method of ITEM , is there any solution I can make so item will re-render on update ? Only one that come to my mind is to create wrapping Component.</p>