onstructor(){
super();
this.state = {
product:[{
id: 1,
name:"Nike",
img:img1,
count: 1,
price: "129$",
},
{
id:2,
name:"Adidas",
img:img2,
count:14,
price: "220$",
},
{
id:3,
name:"Pumma",
img:img4,
count:3,
price: "310$",
},
{
id:4,
name:"Reebok",
img:img5,
count:2,
price: "329$",
},
{
id:5,
name:"New balance",
img:img3,
count:6,
price: "150$",
},
],
case:[]
}
}
addToCase=(add)=>{
let k = this.state.case.find(e=>e.id===add.id)
// console.log(k);
if(!k){
let e = Object.assign({},add)
e.quantity=1
this.state.case.push(e);
add.count--
if(add.count < 1){
this.state.product = this.state.product.filter(e => e.id !== add.id)
}
}
else{
add.count--
k.quantity++
if(add.count < 1){
this.state.product = this.state.product.filter(e => e.id !== add.id)
k.quantity=k.count
}
}
this.setState({});
render(){
const {result, firstValue, secondValue, operator} = this.state;
return(
<div className="Contain">
<table className="t">
<thead>
<tr>
<th>N</th>
<th>img</th>
<th>Name</th>
<th>count</th>
<th>price</th>
</tr>
</thead>
<tbody>
{
this.state.product.map((value, index)=>
<tr key={index}>
<td>{value.id}</td>
<td><img src= {value.img}/></td>
<td>{value.name}</td>
<td>{value.count}</td>
<td>{value.price}</td>
<button onClick={this.addToCase.bind(this,value)}>add</button>
</tr>
)
}
</tbody>
</table>
<table>
<thead>
<tr>
<th>N</th>
<th>img</th>
<th>Name</th>
<th>count</th>
<th>price</th>
</tr>
</thead>
<tbody>
{
this.state.case.map((value, index)=>
<tr key={index}>
<td>{value.id}</td>
<td><img src= {value.img}/></td>
<td>{value.name}</td>
<td>{value.quantity}</td>
<td>{value.price}</td>
<button onClick={this.delToCase.bind(this,value)}>del</button>
</tr>
)
}
</tbody>
</table>
</div>
)
}
}
Средний