React.js | TypeError: Cannot read property ‘productID’ of undefined

React is a declarative, efficient, and flexible JavaScript library for building user interfaces. However, like any other technology, React has its own issues. One of the issues is the “TypeError: Cannot read property ‘productID’ of undefined” error that can occur when working with React components.

Prerequisites

• Basic JavaScript Knowledge
• React JS Fundamentals
• Debugging Skills

This error usually occurs when a component tries to access an object or variable that does not exist in the current scope. Sometimes it exists in the current scope but is not defined properly. In this article, we will discuss the causes and solutions for this TypeError in React.

Example 1: TypeError will occur when object or variable does not exist. 

In this error,  we are using a particular variable in the return block but we forget to define it before the return block. As shown in the code below, ‘productID’ is used in the return block but never define and initialize before the return block.

Javascript

import React from 'react';

function App() {

    return (
        <div className= "App">
            <h1>GeekForGeeks </h1>
            <h2>
                This example shows when the object
                or variable is not defined.
            </h2>
            <h2> Variable: { productID } </h2>
        </div>
    );
}

export default App;

Output: 

To solve this error, we simply define the variable ‘productID’ as productID = “GFG”.

Solution:

Javascript

import React from 'react';

function App() {

    // Here the productID is defined and initialized
    let productID = "GFG";

    return (
        <div className="App">
            <h1 style={{color:"green"}}>
                GeeksforGeeks
            </h1>
            <h2>
                This example shows when the object
                or variable is defined
            </h2>
            <h2>then the error is not there.</h2>
            <h2>Variable: {productID}</h2>
        </div>
    );
}

export default App;

Output:

Example 2: TypeError occurs when you are trying to use .map on the array.

The error will occur when you are trying to use .map on the array that is not defined. As shown in the code below, the product is declared before the return block but at the time of accessing it, we are trying to access it as an array, but we never initialized it as an array.

Javascript

import React from 'react'

function App() {
    let products;
    return (
        <div className="App">
            <h1>GeekForGeeks</h1>
            <h2>
                This example shows when we use map
                on array that is not defined
            </h2>
            {products.map(product => (
                <h2 key={product.productID}>
                    {product.productName}
                </h2>
            ))}
        </div>
    );
}

export default App;

Output:

Solution:  Solution for the above error, you can define the array, or you can use the useState hook. use useState([]) instead of something like useState() while defining array.

1. Define the array without using react hooks.

Javascript

import React from 'react'

function App() {
    let products = [
        {
            productID: 1,
            productName: "GFG"
        },
        {
            productID: 2,
            productName: "GeeksforGeeks"
        },
    ];
    return (
        <div className="App">
            <h1 style={{ color: "green" }}>
                GeeksforGeeks
            </h1>
            <h2>Solution for Example 2.</h2>
            {products.map(product => (
                <h2 key={product.productID}>
                    {product.productName}
                </h2>
            ))}
        </div>
    );
}

export default App;

Output: 

2. Define array using useState and useEffect hook

Javascript

import React, { useState, useEffect } from 'react';

function App() {
    const [products, setProducts] = useState([]);
    let productArray = true;

    useEffect(() => {
        let productID = 1;
        let productName = "GFG";
        let product = { productID, productName };
        setProducts([...products, product]);
    }, [productArray])

    return (
        <div className="App">
            <h1 style={{ color: "green" }}>
                GeeksforGeeks
            </h1>
            <h2>Solution for Example 2.</h2>
            {products.map(product => (
                <h2 key={product.productID}>
                    {product.productName}
                </h2>
            ))}
        </div>
    );
}

export default App;

Output:

Conclusion:

The “TypeError: Cannot read property ‘productID’ of undefined” error in React.js often occurs while attempting to access properties of undefined objects. By using proper initialization, checking for property, and by conditional rendering, you can effectively handle and prevent such errors.