Блог

   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 amp;amp;
          this.state.selectedForCart.map((v, i) => {
            return (
              <Container className="mt-5" key={i}>
                <Row>
                  <Col lg={2} md={2} sm={12}>
                    <p>
                      Price:amp;emsp;amp;#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 amp;amp; (
                      <>
                        <p>{this.state.priceQuantity}</p>
                      </>
                    )}
                  </Col>
                </Row>
              </Container>
            );
          })}
        <Footer />
      </div>
    );
  }
}
  

Здесь, в приведенном выше коде, я отображаю массив элементов из значения объекта состояния «». И если я увеличиваю определенный элемент, то количество этого конкретного элемента должно увеличиваться. Но этого не происходит, все элементы увеличиваются. А также цена должна быть умножена на увеличенное значение и должна быть показана…

Спасибо.

Как и на этом изображении, я меняю количество. Но если я изменю количество продукта, то это отразит цену на все продукты. Поскольку у меня есть только один объект состояния

Вы можете привязать priceQuantity к входному значению. Затем условно отобразите в последнем столбце. Когда вы пытаетесь напечатать priceQuantity в последнем столбце, он будет отображаться для всех строк.

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

{this.state.selectedForCart amp;amp;
          this.state.selectedForCart.map((v, i) => {
            return (
              <Container className="mt-5" key={i}>
                <Row>
                  <Col lg={2} md={2} sm={12}>
                    <p>
                      Price:amp;emsp;amp;#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 amp;amp; (
                      <>
                        <p>{this.state.priceQuantity ? v.priceTaxIncluded * this.state.priceQuantity : 0}</p>
                      </>
                    )}
                  </Col>
                </Row>
              </Container>
            );
          })}