title: How to refresh components when parent state changes in react when using react router
body: <p>I have the parent component called <code>App</code>. It holds the state and the form which changes the state. </p>
  
  <p>I removed the unimportant code. When I type something in the form, an object item is added in the <code>state.item</code> but the <code>ToCompleteItemsComponent</code> doesn't update. Is there a way to update that component on state change</p>
  
  <pre><code>class App extends Component {
    state = {
      items: []
    }
      submitItem=(e)=&gt; {
        e.preventDefault();
        let items = this.state.items;
        items.push({
          name: this.state.ValuePlaceholder,
          completed: false
        });
        this.setState({
          items
  
        });
      }
  
    render() {
  
      return (&lt;BrowserRouter&gt;
        &lt;div className="wrap"&gt;
          ...
         &lt;form onSubmit={this.submitItem}&gt;
            &lt;input type="text" /&gt;
          &lt;/form&gt;
              &lt;Route exact path="/"
                  render={props =&gt; &lt;ToCompleteItemsComponent 
                   items={this.state.items} /&gt; }
                  /&gt;
            &lt;/div&gt;
          &lt;/BrowserRouter&gt;
      );
  
    }
  }
  </code></pre>
  
  <p><strong>Edit</strong> This is the component </p>
  
  <pre><code>class ToCompleteItemsComponent extends Component {
  componentWillReceiveProps(nextProps) {
  // check this.props vs nextProps and setState!
  // do whatever you want.
    console.log(nextProps)
  }
  render(){
    return(&lt;div&gt;
    &lt;ul className="items"&gt;
    {
      this.props.items.map( (item,id)=&gt; &lt;li key={id}&gt;{item.name} &lt;span&gt;x&lt;/span&gt;&lt;/li&gt;)
    }
    &lt;/ul&gt;
    &lt;/div&gt;)
  }
  }
  export default ToCompleteItemsComponent;
  </code></pre>
  
  <p><code>console.log(nextProps)</code> returns an empty array</p>