Hello, I have Quantity counter on Product page I want track each product quantity

Anyone Suggest the Quantity the counter how to update the each product . I trying alredy using the index but the counter value change all product as for all products .Please any do this on product page for qantity . I doing the react basic counter but it’s in loop how update dyanamically change the quantity for all products. … :blush:

I don’t think I understand what you are asking about, and also without the code it’s difficult to know what suggestions to give, so please show your code and try to explain a bit more what’s going on and what should happen instead, and what parts of the code are involved

class Quantity extends React.Component {
  constructor(props) {
    super(props);
    
    this.state = {value: 1}
    this.increment = this.increment.bind(this);
    this.decrement = this.decrement.bind(this);
  }
  
  increment() {
    this.setState(prevState => {value: ++prevState.value});
  }
  
  decrement() {
    this.setState(prevState => {value: prevState.value > 0? --prevState.value : 0});
  }
  
  render() {
    
    return (
/* here is my product map code start */
      <div>
        <p>
        Set the quantity
       </p>
      <div className="quantity-input">
        <button className="quantity-input__modifier quantity-input__modifier--left" onClick={this.decrement}>
          &mdash;
        </button>
        <input className="quantity-input__screen" type="text" value={this.state.value} readonly />
        <button className="quantity-input__modifier quantity-input__modifier--right" onClick={this.increment}>
          &#xff0b;
        </button>  
      </div>  
      </div>
/* here is my product map code end */
    );
  }
}

ReactDOM.render(<Quantity />, document.getElementById('app'));

Here is sample code i reference in my original project simply added in product loop when i click increament the quantity increase the same for all product. how can hold the each product quantity.

You have one single value property that you use everywhere, you will need different ones if you don’t want this to happen

Okay, I know that but i didn’t understand how to implement that code.

your state has only one property, you will need to have a state made differently that keeps track of a value for each product

I thought this was a vanila javascript question.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.