title: How to update the input value when catching an onChange event in React?
body: <p>I am having problems with the total number of items in the CartHeader component. Obviously I have added the quantity of each product but the result is not as I expected ?. Can someone find the fault for me? I sincerely thank.</p>
  
  <pre><code>import CartHeader from "./CartHeader";
  import CartBody from "./CartBody";
  import CartFooter from "./CartFooter";
  import "./styles.css";
  
  class App extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        products: [
          {
            id: 1,
            name: "Apple Watch Series 5",
            description: "Description for Apple Watch Series 5",
            img:
              "https://bachlongmobile.com/media/catalog/product/cache/2/image/040ec09b1e35df139433887a97daa66f/2/0/2076130625_1_1_1.jpg",
            price: 499.99,
            quantity: 1
          },
          {
            id: 2,
            name: "iPhone 11 Pro Max",
            description: "Description for iPhone 11 Pro Max",
            img:
              "https://cdn.fptshop.com.vn/Uploads/Originals/2019/9/11/637037687763926758_11-pro-max-xanh.png",
            price: 1099.99,
            quantity: 1
          },
          {
            id: 3,
            name: "Macbook Pro 16 inch",
            description: "Description for Macbook Pro 16 inch",
            img: "https://shopdunk.com/wp-content/uploads/2019/11/mac16inch.jpg",
            price: 2399.99,
            quantity: 1
          },
          {
            id: 4,
            name: "iPad Pro 12.9 inch",
            description: "Description for iPad Pro",
            img:
              "https://cdn.fptshop.com.vn/Uploads/Originals/2019/1/11/636828015979564724_ipad-pro-12-9-xam-1.png",
            price: 999.99,
            quantity: 1
          },
          {
            id: 5,
            name: "AirPods Pro",
            description: "Description for AirPods Pro",
            img:
              "https://store.storeimages.cdn-apple.com/4982/as-images.apple.com/is/MWP22?wid=1144&amp;hei=1144&amp;fmt=jpeg&amp;qlt=80&amp;op_usm=0.5,0.5&amp;.v=1572990352299",
            price: 249.99,
            quantity: 1
          }
        ]
      };
    }
  
    onRemoveProduct = id =&gt; {
      const newProducts = this.state.products;
      // Tìm vị trí sản phẩm cần xoá
      let index = newProducts.findIndex(product =&gt; product.id === id);
      // Kiểm tra nếu tìm thấy thì mới xoá
      if (index !== -1) {
        newProducts.splice(index, 1);
        this.setState({
          products: newProducts
        });
      }
    };
  
    handleChange = (e, id) =&gt; {
      const { products } = this.state;
      const indexProduct = products.findIndex(product =&gt; product.id === id);
      products[indexProduct].quantity = e.target.value;
      this.setState({ products });
    };
  
    render() {
      const products = this.state.products;
      let numberItems = 0;
      let subTotal = 0;
      products.map(product =&gt; {
        numberItems += product.quantity;
        subTotal += product.price * product.quantity;
      });
  
      return (
        &lt;main&gt;
          &lt;CartHeader numberItems={numberItems} /&gt;
          &lt;CartBody
            products={products}
            onRemoveProduct={this.onRemoveProduct}
            handleChange={this.handleChange}
          /&gt;
          &lt;CartFooter subTotal={subTotal} /&gt;
        &lt;/main&gt;
      );
    }
  }
  
  export default App;
  
  const rootElement = document.getElementById("root");
  ReactDOM.render(&lt;App /&gt;, rootElement);
  </code></pre>
  
  <p>have I ever misunderstood the problem. Link codesandbox: <a href="https://codesandbox.io/s/thirsty-hill-6w2ex" rel="nofollow noreferrer">https://codesandbox.io/s/thirsty-hill-6w2ex</a></p>