DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Nahid Hossain
Nahid Hossain

Posted on

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

I have got this error when I am trying to get product details from database.
My productDetails.jd file:

import React, { Fragment, useEffect } from "react";
import Carousel from "react-material-ui-carousel";
import { useDispatch, useSelector } from "react-redux";
import {
 getProductDetails } from "../../actions/productAction";

const ProductDetails = ({ match }) => {
  const dispatch = useDispatch();

  const { product, loading, error } = useSelector(
    (state) => state.productDetails
  );

  useEffect(() => {
    dispatch(getProductDetails(match.params.id));
  }, [dispatch, match.params.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;
Enter fullscreen mode Exit fullscreen mode

and my productAction.js file:

import axios from "axios";
import {
  PRODUCT_DETAILS_FAIL,
  PRODUCT_DETAILS_REQUEST,
  PRODUCT_DETAILS_SUCCESS,
} from "../constants/productConstants";

// Get Products Details
export const getProductDetails = (id) => async (dispatch) => {
  try {
    dispatch({ type: PRODUCT_DETAILS_REQUEST });

    const { data } = await axios.get(`/api/v1/product/${id}`);

    dispatch({
      type: PRODUCT_DETAILS_SUCCESS,
      payload: data.product,
    });
  } catch (error) {
    dispatch({
      type: PRODUCT_DETAILS_FAIL,
      payload: error.response.data.message,
    });
  }
};
};
Enter fullscreen mode Exit fullscreen mode

and lastly my app.js file:

import React from "react";
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import ProductDetails from "./component/Product/ProductDetails";

function App() {
  return (
    <Router>
      <Routes>
        <Route exact path="/product/:id" element={<ProductDetails />} />
      </Routes>

    </Router>
  );
}

export default App;
Enter fullscreen mode Exit fullscreen mode

I am a beginner in MERN stack and I have understood that it's a react-router-dom versions issue, I am using version: 6.4.0 and it doesn't support "match" but I don't know how to solve this issue. Someone please help me out. Thanks in advance.

Top comments (2)

Collapse
 
accbiggie profile image
Andre Ferreira

Modify your productDetails.js file for:

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 (
Enter fullscreen mode Exit fullscreen mode
Collapse
 
floatingnahid22 profile image
Nahid Hossain

thanks

Tired of sifting through your feed?

Find the content you want to see.

Change your feed algorithm by adjusting your experience level and give weights to the tags you follow.