Cannot read properties of undefined (reading ‘quantity’)

Welcome to Programming Tutorial official website. Today - we are going to cover how to solve / find the solution of this error Cannot read properties of undefined (reading ‘quantity’) on this date .

Why i am getting this type of error ” Cannot read properties of undefined (reading ‘quantity’)”. When i am trying to use onclick() function in button its is not working . I always shows a message that “quantity is undefined and can’t read the property of it”. Please help me to solve this problem. i tried everything yo solve this but failed to do so….

App.js file of the react

import "./App.css";
import Navbar from "./navbar";
import Productlistshow from "./productlistshow";
import { useState } from "react";

function App() {
  const [productList, setproductList] = useState([
    {
      name: "sam1",
      price: 100,
      quantity: 0,
    },
    {
      name: "sam2",
      price: 300,
      quantity: 0,
    },
  ]);
  let incqty = (index) => {
    let product_list = [...productList];
    product_list[index].quantity++
    setproductList(product_list);
  };

 
  return (
    <>
      <Navbar />
      <main>
        <Productlistshow product={productList} incqty={incqty} />
      </main>
    </>
  );
}

export default App;

productlistshow.js file of react

import { Component } from "react";
import Showproduct from "./showproduct";

class Productlistshow extends Component {
  constructor(props, i) {
    super(props);
  }

  render() {
    return this.props.product.map((product, i) => {
      return (
        <Showproduct pro={product} key={i} index={i} incqty={this.props.incqty} />
      );
    });
  }
}

export default Productlistshow;

showproduct.js file of react

function Showproduct(props, index) {
  return (
    <>
      <div className="container">
        <div className="row">
          <div className="col-4">
            <h2>{props.pro.name}</h2>
          </div>
          <div className="col-4">
            <h2>Total Price ${props.pro.price}</h2>
          </div>
          <div className="col-4">
            <h2>
              <div
                className="btn-group"
                role="group"
                aria-label="Basic example"
              >
                <button type="button" className="btn btn-primary">
                  -
                </button>
                <button type="button" className="btn btn-primary">
                  {props.pro.quantity}
                </button>
                <button
                  type="button"
                  className="btn btn-primary"
                  onClick={() => {
                    props.incqty(index);
                  }}
                >
                  +
                </button>
              </div>
            </h2>
          </div>
        </div>
      </div>
    </>
  );
}
 
export default Showproduct;

navbar.js of react

import React from "react";
import "./navbar.css"

class Navbar extends React.Component {
  render() {
    return (
      <nav className="navbar navbar-expand-lg navbar-dark bg-dark">
          <a className="navbar-brand">
            Navbar
          </a>
      </nav>
    );
  }
}

export default Navbar;

navbar.css of react

.navbar-brand
{
    font-size: 2rem;
}

Answer

In the Showproduct component you need to get index from props, not as an independent argument. Currently, index is undefined so getting product_list[index] results in undefined, which is why you see that error.

Just remove index as an independent argument in Showproduct and update the button’s onClick from props.incqty(index); to props.incqty(props.index);.