title: React with lists in state, how to set new state?
body: <p>I ran into an issue with updating part of the state that is a list that's passed on to children of a component.</p>
  
  <p>I pass in a list to a child, but then have trouble to update that list and have the child reflect the new state;</p>
  
  <pre><code>&lt;ItemsClass items={this.state.items1} /&gt;
  </code></pre>
  
  <p>When I change the value of <code>this.state.items1</code>, the component doesn't render with the new value.</p>
  
  <pre><code>this.setState({items1: []}); // this has no effect
  </code></pre>
  
  <p>However, if I change the already existing array (not replacing it new a new empty one), the component renders as I wish;</p>
  
  <pre><code>this.setState(state =&gt; { clearArray(state.items1); return state; });
  </code></pre>
  
  <p>That means the state updating function isn't pure, which React states it should be.</p>
  
  <p>The HTML;</p>
  
  <pre><code>&lt;div id='app'&gt;&lt;/div&gt;
  </code></pre>
  
  <p>The js;</p>
  
  <pre><code>class ItemsClass extends React.Component {
    constructor(props){
      super(props);
  
      this.state = {items: props.items};
    }
  
    render() {
      var items = this.state.items.map(it =&gt; &lt;div key={it.id}&gt;{it.text}&lt;/div&gt;);
      return(
        &lt;div&gt;{items}&lt;/div&gt;
      );
    }
  }
  
  function ItemsFunction(props) {
    var items = props.items.map(it =&gt; &lt;div key={it.id}&gt;{it.text}&lt;/div&gt;);
      return(
        &lt;div&gt;{items}&lt;/div&gt;
      );
  }
  
  class App extends React.Component {
    constructor(props){
      super(props);
      var items = [{id:1, text: 'item 1'}, {id: 2, text: 'item 2'}];
  
      this.state = {
        items1: items.slice(),
        items2: items.slice(),
        items3: items.slice()
      };
      this.clearLists = this.clearLists.bind(this);
    }
  
    clearLists() {
      // for items1 and items2, clear the lists by assigning new empty arrays (pure).
      this.setState({items1: [], items2: []});
  
      // for items3, change the already existing array (non-pure).
      this.setState(state =&gt; {
        while (state.items3.length) {
          state.items3.pop();
        }
      })
    }
  
    render() {
      return (
        &lt;div&gt;
          &lt;button onClick={this.clearLists}&gt;Clear all lists&lt;/button&gt;
          &lt;h2&gt;Items rendered by class, set list to new empty array&lt;/h2&gt;
          &lt;ItemsClass items={this.state.items1} /&gt;
          &lt;h2&gt;Items rendered by class, empty the already existing array&lt;/h2&gt;
          &lt;ItemsClass items={this.state.items3} /&gt;
          &lt;h2&gt;Items rendered by function&lt;/h2&gt;
          &lt;ItemsFunction items={this.state.items2} /&gt;
        &lt;/div&gt;
        );
    }
  }
  
  ReactDOM.render(&lt;App /&gt;, document.getElementById('app'));
  </code></pre>
  
  <p>Try it out on <a href="http://codepen.io/anon/pen/oWVdmq" rel="nofollow noreferrer">codepen</a>.</p>
  
  <p>It seems that the <code>ItemsClass</code> doesn't update even though it's created with <code>&lt;ItemsClass items={this.state.items1}/&gt;</code> and <code>this.state.items1</code> in the parent changes.</p>
  
  <p>Is this the expected behavior? How can I update the state in the <code>ItemsClass</code> child from the parent?
  I'm I missing something? This behavior seems quite error prone, since it's easy to assume that the child should follow the new state, the way it was passed in when the child was created.</p>