title: react component is no updateing the view after deleting an item
body: <p>this the onDelete function which supposed to update the state and the item should disappear from the list once the delete button is pressed</p>
  
  <pre class="lang-js prettyprint-override"><code>onDelete = async (id) =&gt; {
          const messages = await Api.deleteMessage(id);
          const messageId = id;
          const filterdMessages =this.state.messages.filter((message) =&gt; {
              return message.id !== messageId
          });
          this.setState({
              messages: [...filterdMessages]
          });   
      }   
  </code></pre>
  
  <p>and this what is being rendered </p>
  
  <pre class="lang-js prettyprint-override"><code>render() {
          const {
              messages
          } = this.state;
  
          const $messages = messages.map((message) =&gt; &lt;MessageItem onDelete={this.onDelete} key={message.id} {...message} /&gt;);
  
          console.log( $messages);
          return (
  
              &lt;section className="messages"&gt;
                  &lt;ul&gt;
                      {$messages}
                  &lt;/ul&gt;
              &lt;/section&gt;
          )
      }
  </code></pre>
  
  <p>this the messageItem </p>
  
  <pre class="lang-js prettyprint-override"><code>
  export default ({ id, body, onResolve, onDelete, license_plate }) =&gt; {
  
      const onResolveClick = (event) =&gt; {
          event.preventDefault();
          onResolve(id);
      };
  
      const onDeleteClick = (event) =&gt; {
          event.preventDefault();
          onDelete(id);
      };
  
      return (
          &lt;li className="MessageItem"&gt;
              &lt;span&gt; &lt;b&gt;{license_plate} &lt;/b&gt;{body}&lt;/span&gt;
              &lt;button onClick={onDeleteClick}&gt;Delete&lt;/button&gt;
          &lt;/li&gt;
      )
  }
  </code></pre>