Uncaught TypeError: Cannot read properties of undefined (reading 'images')

user_19309986 0
Viewed 406

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

enter image description here

jsx react-redux react-hooks reactjs javascript
2 Answers
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

user_143948490

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;
user_86908570
Related