I am sending an id from ProductListing Component and I am receiving that id using useParams in ProductDetail Component. In ProductDetail Component I am finding an object using find method and then I am setting it into singleProduct State. But on refresh I get singleProduct is undefined.
imports
import React, { useState, useEffect } from "react";
import { NavLink, useParams } from "react-router-dom";
import Loading from "../other/Loading";
state
const ProductDetail = () => {
const [loading, setLoading] = useState(false);
const [products, setProducts] = useState([]);
const [singleProduct, setSingleProduct] = useState({});
receiving an id using useParams
const { id } = useParams();
useEffect
useEffect(() => {
//GETTING PRODUCTS ARRAY
getProductListingData();
//FINDING A SINGLE OBJECT
getProductID();
}, []);
getting products array
const getProductListingData = async () => {
try {
const response = await fetch("http://localhost:8000/productListing");
const data = await response.json();
if (data) {
setLoading(false);
setProducts(data.products);
} else {
setProducts("PRODUCT LISTING DATA NOT FOUND");
}
} catch (error) {
console.log(error);
}
};
if (loading) {
return <Loading loadingProductListing="Loading Product List" />;
}
const getProductID = () => {
let foundProduct = {};
foundProduct = products.find((item) => {
return item.id === parseInt(id);
});
setSingleProduct(foundProduct);
};
// console.log("product ID = ", productID, typeof productID);
console.log("products = ", products);
console.log("singleproduct = ", singleProduct);
JSX
return (
<>
<div className="dvProducts col-12">
<div className="row">
<div className="col-12">
<NavLink
to="/product-listing"
className="text-dark mb-1 d-inline-block"
>
<i className="fa fa-angle-left f16"></i>
<span> Back</span>
</NavLink>
</div>
<div className="col-12 col-md-6 col-xl-4 mb-3">
<div className="border border-light shadow-sm p-1 h-100">
<div className="bg-light text-center p-5">
<a className="d-inline-block">
<img
src="images/description/coconut-water-200ml.png"
className="img-fluid"
alt="..."
/>
</a>
</div>
</div>
</div>
<div className="col-12 col-md-6 col-xl-8 d-flex mb-3 mb-xl-0">
<div className="m-md-auto">
<div>
<h4>Coconut Water</h4>
</div>
<div className="mb-2">
<i className="fa fa-star text-warning d-inline-block"></i>
<i className="fa fa-star text-warning d-inline-block"></i>
<i className="fa fa-star text-warning d-inline-block"></i>
<i className="fa fa-star-o text-warning d-inline-block"></i>
<i className="fa fa-star-o text-warning d-inline-block"></i>
</div>
<div className="mb-3">
<p>
Every athlete's go to natural energy drink; Coconut
Water is a complete win-win for your everyday
rehydration needs. #iaminlovewiththecoco!
</p>
</div>
<div className="d-flex mb-3">
<div className="mr-2">
<h6 className="d-inline-block mb-1">Size:</h6>
<span className="d-inline-block">200ml</span>
</div>
<div className="mr-2 ml-2">
<h6 className="d-inline-block mb-1">Category:</h6>
<span className="d-inline-block">Juices</span>
</div>
<div className="ml-2">
<h6 className="d-inline-block mb-1">Price:</h6>
<span className="d-inline-block">
<i className="fa fa-inr"></i>
<span className="d-inline-block">40.00</span>
</span>
</div>
</div>
<div>
<button
className="btn btnSecondary"
href="detail.html"
>
Add to Bag
</button>
</div>
</div>
</div>
</div>
</div>
</>
);
};
export default ProductDetail;