0
711
ViewsUncaught TypeError: Cannot read properties of undefined (reading 'images')
I'm having this error right after I fix a "Uncaught TypeError: Cannot read properties of undefined (reading 'params')" using const { id } = useParams();.
ProductDetail.jsx
import React, { Fragment, useEffect } from 'react';
import Carousel from "react-material-ui-carousel";
import "./ProductDetails.css";
import {useSelector, useDispatch} from "react-redux";
import { getProductDetails } from '../../actions/productAction';
import { useParams } from 'react-router-dom';
const ProductDetails = ({}) => {
const { id } = useParams();
const dispatch = useDispatch();
const { product, loading, error } = useSelector(
(state) => state.productDetails
);
useEffect(() => {
dispatch(getProductDetails(id));
}, [dispatch, id]);
return (
<Fragment>
<div className="ProductDetails">
<div>
<Carousel>
{product.images && product.images.map((item, i) => (
<img
className='CarouselImage'
key={item.url}
src={item.url}
alt={`${i} Slide`}
/>
))}
</Carousel>
</div>
</div>
</Fragment>
);
};
export default ProductDetails
Console error: sorry its an img, dont know how to post it
2 answers
Answer question0
product.images && product.images.map((item, i) =>(
on this line product may be undefined. if product is may or may not be present use product?.images?.map
0
The error is informing you that the product variable is undefined.
Use a null-check/guard-clause to protect it
product && product.images && product.images.map(.....
or use the Optional Chaining operator
product?.images?.map(.....
Since this ProductDetails component appears to be fetching the product data after the component mounts you'll need to guard against product being undefined on the initial render and any subsequent render until the productDetails state is populated. Here it may be preferable to conditionally render null or some loading indicator while product is undefined.
Example:
const ProductDetails = () => {
const { id } = useParams();
const dispatch = useDispatch();
const { product, loading, error } = useSelector(
(state) => state.productDetails
);
useEffect(() => {
dispatch(getProductDetails(id));
}, [dispatch, id]);
return (
<Fragment>
<div className="ProductDetails">
<div>
{product?.images
? (
<Carousel>
{product.images?.map((item, i) => (
<img
className='CarouselImage'
key={item.url}
src={item.url}
alt={`${i} Slide`}
/>
))}
</Carousel>
)
: (
<div>Fetching Product Details</div>
)
}
</div>
</div>
</Fragment>
);
};
export default ProductDetails;