I am not sure what I'm missing here. I did a few search about this error but I can't not find anything that will on my error. The Home screen page will render all images. Prior to this, when a single image is clicked, it will open a new page to show the image. What i was trying to do is, when the image is clicked, i would like the image PLUS the detailed information of the image. All I get is an empty blank page with the error on dev tools (see below). Thank you in advance...
ProductScreen.js:18 Uncaught TypeError: Cannot read properties of undefined (reading 'params')
Here's the code:
import React, { useEffect } from 'react';
import Rating from '../components/Rating';
import { Link, useParams } from 'react-router-dom';
import { useDispatch, useSelector } from 'react-redux';
import LoadingBox from '../components/LoadingBox';
import MessageBox from '../components/MessageBox';
import { detailsProduct } from '../actions/productActions';
function ProductScreen(props) {
const dispatch = useDispatch();
const { id } = useParams();
console.log("A", id);
const productId = props.match.params.id; // this is the error as per dev tools
console.log(props.match.params.id);
const productDetails = useSelector((state) => state.productDetails);
const { loading, error, product } = productDetails;
useEffect = (() => {
dispatch(detailsProduct(productId));
}, [dispatch, productId]);
return (
//code here
)
}
export default ProductScreen;
[1]: https://i.stack.imgur.com/jdshU.png
Looks like you are not passing the props match while creating the JSX Element of ProductScreen. This line will look like this
<ProductScreen match={someMatchObj} />
As @mushroomator suggests you should also check if the value is undefined.
@mushroomator
This is my JSX...
return (
<div>
{loading ? (
<LoadingBox></LoadingBox>
) : error ? (
<MessageBox variant="danger">{error}</MessageBox>
) : (
<div>
<Link to="/">Back To Result</Link>
<div className="row top">
<div className="col-2">
<img className="large" src={product.image} alt={product.name} ></img>
</div>
<div className="col-1">
<ul>
<li>
<h1>{product.name}</h1>
</li>
<li>
<Rating
rating={product.rating}
numReviews={product.numReviews}
>
</Rating>
</li>
<li>
Price: ${product.price}
</li>
<li>
Description:
<p>{product.description}</p>
</li>
</ul>
</div>
<div className="col-1">
<div className="card card-body">
<ul>
<li>
<div className="row">
<div>Price</div>
<div className="price">${product.price}</div>
</div>
</li>
<li>
<div className="row">
<div>Status</div>
<div>
{product.countInStock > 0 ? (
<span className="success">In Stock</span>
) : (
<span className="danger">Unavailable</span>
)}
</div>
</div>
</li>
<li>
<button className="primary block">Add to Cart</button>
</li>
</ul>
</div>
</div>
</div>
</div>
)}
</div>
)
}
export default ProductScreen;