Есть массив с элементами, добавленными в корзину, нужно отфильтровать массив при клике на иконку корзины в 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>
);
}
}