this is the App.js file
import React from "react";
import ListProduct from "./listProduct";
import ListOrder from "./listOrder";
import pizza from "./pizza.jpg";
import './style.css'
import { Container,Row,Col,Button } from 'react-bootstrap';
class App extends React.Component {
constructor() {
super();
this.state = {
total: 0,
count: 0,
products: [
{ id: 0, name: "Cold cuts", price: 5, value: 0, src: pizza },
{ id: 1, name: "Pepperoni", price: 3.5, value: 0, src: pizza },
{ id: 2, name: "Feta", price: 2.5, value: 0, src: pizza },
{ id: 3, name: "Mozzarella", price: 1.5, value: 0, src: pizza },
{ id: 4, name: "Swiss cheese", price: 1.5, value: 0, src: pizza },
{ id: 5, name: "Spices", price: 0.5, value: 0, src: pizza },
{ id: 6, name: "Vegetables", price: 0.5, value: 0, src: pizza },
],
foodsOrder: [],
};
}
handleIncrement = () => {
this.setState({
count: this.state.count + 1,
});
};
render() {
return (
<Container >
<Row>
<Col xs = {8}>
<ListOrder />
</Col>
<Col className = 'item'>
<Row className = 'header'>
<span>Your pizza : </span>
<span>$</span>
<Button variant = 'warning'>Reset Pizza</Button>
</Row>
<ListProduct
count={this.state.count}
handleIncrement={this.handleIncrement}
products = {this.state.products}
/>
</Col>
</Row>
</Container>
);
}
}
export default App;
this is the listProduct.js file
import React, { Component } from "react";
import Item from "./Item";
import {Row,Button} from 'react-bootstrap';
class ListProduct extends React.Component {
render() {
const {handleIncrement,count,products} = this.props
return (
<>
{products.map(product => <Item key = {`${product.id}`} {...product}
handleIncrement={handleIncrement}
count={count}
/>)
}
</>
);
}
}
export default ListProduct;
this is the Item.js file
import React from 'react'
import ListProduct from './listProduct';
import {Row,Col,Button,Badge } from 'react-bootstrap';
class Item extends React.Component{
render(){
const {id,name,price,value,pizza} = this.props
const {handleIncrement,count} = this.props
return (
<>
<Row className = 'item'>
<Col className = 'information'>
<p>{name}</p>
<p>{`${price} $`}</p>
</Col>
<Col className = 'button'>
<Button className = 'add' variant = 'success' onClick = {() => {handleIncrement(id)}} >+</Button>
<Badge>{count}</Badge>
<Button className = 'delete' variant="danger">-</Button>
</Col>
</Row>
</>
)
}
}
export default Item;
When I click the event handler in the button, all variables in `this.state.count` in the `App` class increase as shown in the following image. I've tried other ways but it hasn't worked: https://i.stack.imgur.com/owUPZ.png
I want that when I click a button, only that specific button gets executed. Help me with this issue. Thank you so much........................................