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.
Here ‘ProductID’ is an object or variable or array, it can be anything. I have given examples below of all of them.
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"}}> neveropen </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: "neveropen" }, ]; return ( <div className="App"> <h1 style={{ color: "green" }}> neveropen </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" }}> neveropen </h1> <h2>Solution for Example 2.</h2> {products.map(product => ( <h2 key={product.productID}> {product.productName} </h2> ))} </div> ); } export default App; |
Output:
