title: React Removing an item from a to do list
body: <p>i'm creating a simple react to do list, I'm currently working on a delete button, I have created an array then passed this array into a prop, I then need to splice that item from the prop array when the user clicks the delete button. I was able to store the array number but I cant seem to update the array after its deleted. </p>
  
  <p>CLASS CALL:</p>
  
  <pre><code> &lt;TodoList items={this.state.items} deleteItems={this.deleteItem}/&gt;
  </code></pre>
  
  <p>SUB-CLASS CODE: </p>
  
  <pre><code>class TodoList extends Component {
    constructor(props) {
      super(props);
      this.removeItem = this.removeItem.bind(this);
  
    }
  
    render() {
  
      return (
        &lt;div&gt;  
          { this.props.items.map((item, i) =&gt; (
            &lt;div className={"col-12"} key={item.id}&gt;
              &lt;div className={"card text-white"}&gt;
                &lt;div className={item.priority}&gt;
                  &lt;div className={"col-12 card-body"}&gt;
                    &lt;h1&gt;{item.title}&lt;/h1&gt;
                    &lt;p&gt;{item.text}&lt;/p&gt;
                    &lt;button onClick={() =&gt; { this.removeItem(item, i)}} key={i} className={"col-12 btn btn-primary bg-red"}&gt;Delete&lt;/button&gt; 
                  &lt;/div&gt;         
                &lt;div/&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          ))}
        &lt;/div&gt;
  
      );
  
    }
    removeItem(e, i) {
      this.props.items.splice(i, '');
      console.log(i);
    }
  }
  </code></pre>
  
  <p>I have been looking at different stack questions but none of the solutions seem to apply to this, thanks for any constructive feedback :)</p>