How to remove element when clicking from an array?

There is an array with the items added to the cart, you have to filter the array by clicking on the trash can icon on Cart.jsx

Items.jsx( parent component)
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}/">
)
}
</item></div>
</section>
</cart></div>
);
}
}
export default Items;


Cart.jsx(a component of the basket)
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">
 the <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> 
);
}
}
June 10th 19 at 14:27
1 answer
June 10th 19 at 14:29
I understand that id is the index in the array?
handleDelete(id) {
 let title = [...this.state.title];
 title.splice(id, 1);
this.setState({title})
}

Find more questions by tags FrontendReactJavaScript