Как удалять элемент при клике из массива?

Есть массив с элементами, добавленными в корзину, нужно отфильтровать массив при клике на иконку корзины в Cart.jsx

Items.jsx( родительский компонент)

import React, {Component} from 'react';

import Item from '../components/Item';
import Cart from '../components/Cart';

import '../css/shop.css';
import '../css/keyload.css';

class Items extends Component{
    constructor(props){
        super();
        this.state ={
            price: 0,
            title: []
        };
        this.handleCartPriceChange = this.handleCartPriceChange.bind(this);
        this.handleDelete = this.handleDelete.bind(this);
}
handleCartPriceChange(price, title, itemPrice){
    this.setState({ price: this.state.price + price, title: [...this.state.title, title]});
}
handleDelete(id){
    console.log(id);
    let title = this.state.title.filter(() => id);
    this.setState({title: title})
}
    render(){
    return(
        <div className="wrap">
            <Cart onDelete={this.handleDelete} title={this.state.title} price={this.state.price} />
            <section className="shop">
                <div className="wrap_container">
                {this.props.items.map(item =>
                     <Item title={item.title} price={item.price} onCartPriceChange={this.handleCartPriceChange} key={item.id} shirt ={item.img}/>
                )
                }
                </div>
            </section>
        </div>
    );
}
}
export default Items;

Cart.jsx(компонент корзины)

import React, {Component} from 'react';

import Button from './Button';

import cart from './img/cart.svg';
export default class Cart extends Component{
    constructor(props){
        super();
    }
    render(){
        var price = this.props.price;
        var title = this.props.title;
        if(price > 2000){
            price = 2000;
        }
        return(
            <aside className="cart">
            <div className="wrapper">
                    <img src={cart} alt=""/>
                    <div className="priceOutput">
                        <span className="price">{`${price ? price+ '$' : 'Add item to cart' }` }</span>
                        <hr/>
                        <div className="cart_history">
                            <ul>{title.map((n, i) =>
                                <li key={i} className="item">{n}<i onClick={()=>this.props.onDelete(i)} className="material-icons">delete</i></li> 
                            )}</ul>
                        </div>
                        <Button className="btn_submit">Submit</Button>
                    </div>
            </div>
            </aside>            
        );
    }
}