title: ReactJS - Children do not re-render correctly after change in parent
body: <p>I am new to ReactJS, so I tried to develop a little application to understand how it works. It is an interface which grab data (users) from an API, and display it. I can also add data and delete users. Adding is working but I have issues with deleting. </p>
  
  <p>Json Component (Parent)</p>
  
  <pre><code>class Json extends React.Component {
    constructor(props){
      super(props);
      this.state = {items: []}
      this.updateDelete = this.updateDelete.bind(this)
      this.updateAdd = this.updateAdd.bind(this)
    }
  
    componentDidMount() {
      this.grabusers();
    }
  
    grabusers() {
      var request = new Request('http://localhost:4000/users', {
           method: 'GET',
           mode: 'cors'
      });
      fetch(request).then(result=&gt;result.json()).then(items=&gt;this.setState({items: items}))
    }
  
    updateDelete(user){
      var i = this.state.items.indexOf(user)
      var items = this.state.items
      items.splice(i,1)
      this.setState({items: items})
    }
  
    updateAdd(user){
      var items = this.state.items
      items.push(user)
      this.setState(items)
    }
  
    render(){
      return (
        &lt;div&gt;
          &lt;Form updateJson={this.updateAdd}/&gt;
          &lt;div className="row"&gt;
            {this.state.items.map(item =&gt; &lt;Card item={item} updateJson={this.updateDelete}/&gt;)}
          &lt;/div&gt;
        &lt;/div&gt;
      )
    }
  }
  </code></pre>
  
  <p>Card Component (Child)</p>
  
  <pre><code>class Card extends React.Component {
    constructor(props){
      super(props)
      this.state = {item: props.item}
      this.delete = this.delete.bind(this)
    }
  
    delete(){
      var request = new Request('http://localhost:4000/users/'+this.state.item._id, {
           method: 'DELETE',
           mode: 'cors'
      });
      fetch(request).then(() =&gt; this.props.updateJson(this.state.item))
    }
  
    render(){
      return (
        &lt;div className="col-md-4"&gt;
        &lt;div className="Card row"&gt;
          &lt;div className="col-md-2"&gt;&lt;span className="glyphicon glyphicon-user icon" aria-hidden="true"&gt;&lt;/span&gt;&lt;/div&gt;
          &lt;div className="col-md-10"&gt;&lt;Fullname firstname={this.state.item.firstname} lastname={this.state.item.lastname}/&gt;
          &lt;City city={this.state.item.city}/&gt;&lt;/div&gt;
          &lt;button type="button" className="btn btn-danger buttondelete" onClick={this.delete}&gt;Delete&lt;/button&gt;
        &lt;/div&gt;
        &lt;/div&gt;)
    }
  }
  </code></pre>
  
  <p>When I delete a user, the state.items of Json update accordingly to the deletion, but the Cards are not re-rendered accordingly. In fact, the props are passed to the cards, but it is always the last one which is removed from the view, whereas a console.log shows that everything is fine...</p>