Here is my code for Home.js and it is giving me an error regarding properties of undefined (reading 'error'). Can please anyone suggest a solution for this?
Here is the code in Home.js
import React from 'react'
import {useState , useEffect} from 'react'
import {getProducts} from "./helper.js/coreapicalls"
function Home() {
const [products, setProducts] = useState([]);
const [error, setError] = useState(false);
const loadAllProducts = () => {
getProducts()
.then((data) => {
if (data.error) {
setError(data.error);
console.log(error);
} else {
setProducts(data);
}
});
};
useEffect(() => {
loadAllProducts();
});
return (
<div>
<h1>Home component</h1>
<div className = "row">
{products.map((product , index)=>{
return(
<div key = {index}>
<h1>{product.name}</h1>
</div>
)
})}
</div>
</div>
)
}
export default Home
× Unhandled Rejection (TypeError): Cannot read properties of undefined (reading 'error')
10 | const loadAllProducts = () => {
11 | getProducts()
12 | .then((data) => {
> 13 | if (data.error) {
| ^ 14 | setError(data.error);
15 | console.log(error);
16 | } else {
your data is probably undefined, hence reading error property on an undefined fails on line 13 if (data.error)