title: React remove element from onclick
body: <p>When a user deletes an item from their cart, I have the item displayed with a button to add it back to the cart. This works. Once the user adds the item back to their cart, I want the item in the display component to be removed. Here is my code for reference.</p>
  
  <pre><code>CART:
  class Cart extends Component {
    constructor(props) {
      super(props);
      this.state = {differences: [],};
    }
  
    componentWillReceiveProps(nextProps){
      let thisProps = this.props.cart.items;
      let theNextProps = nextProps.cart.items;
      if (thisProps.map(i =&gt; i.sku).some(item =&gt; !theNextProps.map(i =&gt; i.sku).includes(item))) {
        let diff = [thisProps.filter(item =&gt; !theNextProps.includes(item))];
        this.setState({differences: this.state.differences.concat(diff)});
      }
    }
  ...
    render = () =&gt; {
      &lt;CartAddBack data={this.state.differences} onAddToCart={this.props.addToCart} /&gt;
      &lt;CheckoutSection className='Checkout-cart-items' titleKey='checkout.items.title'&gt;
        {this.props.cart.items.map((item) =&gt; {
          return (
            &lt;CheckoutItem item={item} key={item.sku} onRemoveProduct={this.props.removeFromCart} onUpdateQuantity={this.props.updateCartItem}/&gt;
          );
         })}
      &lt;/CheckoutSection&gt;
    }
  }
  
  CartAddBack:
  class CartAddBack extends Component {
    constructor() {
      super();
      this.state = {deleted: null};
      this.onDelete = this.onDelete.bind(this);
    }
  
    onDelete(id){
      console.log("THE SKU SHOULD BE HERE", id);
      this.setState(id);
    }
  
    render() {
      let {data} = this.props;
      let theData = data.map(i =&gt; parseInt(i[0].sku));
      let theStated = this.state.deleted;
      return (
        &lt;div&gt;
          {data &amp;&amp;
          &lt;div className="CartAddBack"&gt;
            &lt;div className="CartAddBack-Wrapper"&gt;
                &lt;ul className="CartAddBack-Item-ul"&gt;
                  {theStated != null
                    ? theData.filter(i =&gt; !theStated.includes(i)) &amp;&amp;
                      &lt;CartAddBackItem data={item[0]} onAddToCart={this.props.onAddToCart} onDelete={this.onDelete}/&gt;
                    : data.map((item) =&gt; {
                        return &lt;CartAddBackItem data={item[0]} onAddToCart={this.props.onAddToCart} onDelete={this.onDelete}/&gt;
                    })
                  }
                &lt;/ul&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          }
        &lt;/div&gt;
      )
    }
  }
  
  CartAddBackItem:
  class CartAddBackItem extends Component {
    constructor() {
      super();
      this.onClick = this.onClick.bind(this);
    }
  
    onDelete(){
      this.props.onDelete({deleted: this.props.data.sku})
    }
  
    allowSubmit() {
      this.setState({
        allowSubmit: true,
      });
    }
  
    onClick() {
      if (this.props.data) {
        if (this.props.data.quantity &lt;= this.props.data.inventory_quantity) {
          const success = () =&gt; {
              this.allowSubmit();
            },
            failure = (err) =&gt; {...};
          this.props.onAddToCart({
            ...{sku: this.props.data.sku, quantity: this.props.data.quantity}, quantity: this.props.data.quantity}).then(success, failure);
        }
        else {
          this.setState=({display: false});
          const success = () =&gt; {
              this.allowSubmit();
            },
            failure = (err) =&gt; {...};
  
          this.props.onAddToCart({
            ...{sku: this.props.data.sku, quantity: this.props.data.quantity}, quantity: 1}).then(success, failure);
        }
      }
    }
  
    render() {
      let {data} = this.props;
      return (
        &lt;li className="CartAddBackItem"&gt;
          {data &amp;&amp;
          &lt;div className="CartAddBackItem-Wrapper"&gt;
            &lt;Button className="CartAddBackItem-button" onClick={this.onClick}&gt;&lt;FormattedMessage id="cart.cartAddBack"/&gt;&lt;/Button&gt;
            &lt;Link to={`product/${data.sku}`} className="CartAddBackItem-Link"&gt;
              &lt;p className="CartAddBackItem-title"&gt;{data.title}&lt;/p&gt;
            &lt;/Link&gt;
          &lt;/div&gt;
          }
        &lt;/li&gt;
      )
    }
  }
  </code></pre>
  
  <p>I want CartAddBack to remove CartAddBackItem if the item was clicked in CartAddBackItem. Only thing I havent tried that I just thought about was to make a componentWillReceiveProps inside CartAddBack. But there has to be a better way. Issue I'm running into is my mapping items into CartAddBackItem. The gross looking <code>{theStated != Null ? theData.filter(i =&gt;...</code> allows me to add items to the cart. It works if it was only <code>data.map((item)=&gt;...</code> but I want to show my thinking.  Any advice?</p>