the HomeScreen is able to display the items without a problem however the productscreen is not showing at all. In the app.js when i put the cursor on homescreen it says its undefined
import React, { useEffect, useState } from ‘react’;
import { Link } from ‘react-router-dom’;
import { useDispatch, useSelector } from ‘react-redux’;
import { detailsProduct } from ‘../actions/productActions’;
import { addToCart } from ‘../actions/cartActions’;
import { useParams } from ‘react-router-dom’;
function ProductScreen (props) {
const {id} = useParams();
const [qty, setQty] = useState(1);
const productDetails = useSelector(state => state.productDetails);
const { product, loading, error } = productDetails;
const dispatch = useDispatch();
useEffect(() => {
dispatch(detailsProduct(id));
}, [dispatch, id]);
const handleAddToCart = () => {
if (props.history && props.match) {
props.history.push(“/cart/” + props.match.params.id + “?qty=” + qty);
}
};
if (!product) {
return <div>
<div className=’back-to-result’>
<Link to=’/’>Back to result</Link>
</div>
{loading ? <div>loading…</div>:
error ? <div>{error}</div>:
(
<div className=”details”>
<div className=”details-image”>
{ <img src={product.image} alt=”product” ></img>}
</div>
<div className=”details-info”>
<ul>
<li>
<h4>{product.name}</h4>
</li>
<li>
{product.rating} Stars ({product.numReviews} Reviews)
</li>
<li>
Price: <b>${product.price}</b>
</li>
<li>
Description:
<div>{product.description}</div>
</li>
</ul>
</div>
<div className=”details-action”>
<ul>
<li>
Price: {product.price}
</li>
<li>
Status:{product.countInStock > 0? “In Stock” : “Out of”}
</li>
<li>
Qty: <select value={qty} onChange={(e) => { setQty(e.target.value) }} >
{[…Array(product.countInStock).keys()].map(x=>
<option key={x + 1} value={x + 1}> {x + 1} </option>
)}
</select>
</li>
<li>
{product.countInStock > 0 && <button onClick={handleAddToCart} className=”button primary” > Add to cart</button>}
</li>
</ul>
</div>
</div>
)};
</div>
}
}
export default ProductScreen;