Increment or decrement a value in react array while mapping

Question

  export default class Cart extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedForCart: [],
      checkOut: true,
      priceQuantity: undefined,
      total: undefined,
    };
  }

  render() {
    return (
      <div>
        <NavBar />
        {this.state.selectedForCart &&
          this.state.selectedForCart.map((v, i) => {
            return (
              <Container className="mt-5" key={i}>
                <Row>
                  <Col lg={2} md={2} sm={12}>
                    <p>
                      Price:&emsp;&#8377;
                      {v.priceTaxIncluded}
                    </p>
                    <p style={{ fontSize: "10px" }}>Tax inclusive</p>
                  </Col>

                  <Col lg={2} md={2} sm={12}>
                    <Form.Group>
                      <Form.Label>Quantity</Form.Label>
                      <Form.Control
                        type="number"
                        placeholder="Quantity"
                        value={1}
                        onChange={(e) => {
                           this.setState({
                           priceQuantity: e.target.value

                           });
                          console.log(v.priceTaxIncluded * e.target.value);
                        }}
                      />
                    </Form.Group>
                  </Col>
                  <Col lg={2} md={2} sm={12}>
                    {this.state.checkOut && (
                      <>
                        <p>{this.state.priceQuantity}</p>
                      </>
                    )}
                  </Col>
                </Row>
              </Container>
            );
          })}
        <Footer />
      </div>
    );
  }
}

Here in the above code, I'm mapping an array of items from the state object "" value. And if I increment a specific item, then that specific item's quantity only should increment. But it is not happening all items are getting incremented. And also the price should be multiplied with the incremented value and should be shown...

Thank You.

As in this image, I'm changing the quantity. But If I change the quantity of a product, then its reflecting the price for all products. As I have only one state object

Answer 1

You can bind the priceQuantity to input value. Then conditionally render in last column. As you are trying to print priceQuantity in last column it will show for all rows.

 this.state = {
      ...
      priceQuantity: 0,
      ..
    };

{this.state.selectedForCart &&
          this.state.selectedForCart.map((v, i) => {
            return (
              <Container className="mt-5" key={i}>
                <Row>
                  <Col lg={2} md={2} sm={12}>
                    <p>
                      Price:&emsp;&#8377;
                      {v.priceTaxIncluded}
                    </p>
                    <p style={{ fontSize: "10px" }}>Tax inclusive</p>
                  </Col>

                  <Col lg={2} md={2} sm={12}>
                    <Form.Group>
                      <Form.Label>Quantity</Form.Label>
                      <Form.Control
                        type="number"
                        placeholder="Quantity"
                        value={this.state.priceQuantity}
                        onChange={(e) => {
                           this.setState({
                           priceQuantity: e.target.value

                           });
                          console.log(v.priceTaxIncluded * e.target.value);
                        }}
                      />
                    </Form.Group>
                  </Col>
                  <Col lg={2} md={2} sm={12}>
                    {this.state.checkOut && (
                      <>
                        <p>{this.state.priceQuantity ? v.priceTaxIncluded * this.state.priceQuantity : 0}</p>
                      </>
                    )}
                  </Col>
                </Row>
              </Container>
            );
          })}