React page doesn;t load when adding map - reactjs

Question

this is my implementation for description page and I want to show the related products. Everything works but as soon as I add the map for the related products, the page doesn't load anymore. I have tried adding other elements and that seems to work ok, but the issue is with the map I believe.
this is my router for the frontend
<Route exact path="/product/details/:id">
<ProductDescriptionPage />
</Route>
ProductDescriptionPage.js
import { useEffect, useState } from "react";
import {
MDBCard,
MDBCardTitle,
MDBCardText,
MDBCardBody,
MDBCardImage,
MDBRow,
MDBCol,
} from "mdb-react-ui-kit";
import Header from "../components/Header";
const ProductDescriptionPage = () => {
let id = window.location.pathname;
console.log("id : " + id);
let arr = [];
arr = id.split("/");
console.log(arr[3]);
id = arr[3];
const [product, setProduct] = useState({
name: "",
price: 0,
description: "",
category: "",
quantity: "",
isBestSeller: true,
photoURL: "",
});
const [relatedProducts, setRelatedProducts] = useState(null);
useEffect(() => {
fetch(`http://localhost:5000/products/${id}`)
.then((response) => response.json())
.then((json) => {
setProduct(json.data);
})
.catch((err) => {
console.log(`Error ${err}`);
});
}, []);
useEffect(() => {
fetch(`http://localhost:5000/products/related/${product._id}`)
.then((res) => res.json())
.then((json) => {
setRelatedProducts(json.data);
console.log("relatedProducts " + relatedProducts);
})
.catch((err) => {
console.log(`Error ${err}`);
});
}, []);
return (
<>
<p>heyys</p>
<Header />
<MDBCard style={{ width: "70rem", margin: "auto auto auto auto" }}>
<MDBRow className="g-0 align-items-center">
<MDBCol md="6">
<MDBCardImage
src={product.photoURL}
alt="..."
fluid
style={{ height: "30rem", "object-fit": "cover" }}
/>
</MDBCol>
<MDBCol md="6">
<MDBCardBody>
<MDBCardTitle> {product.name}</MDBCardTitle>
<MDBCardText>
This is a wider card with supporting text below as a natural
lead-in to additional content. This content is a little bit
longer.
</MDBCardText>
<MDBCardText>
<small className="text-muted">Last updated 3 mins ago</small>
</MDBCardText>
<MDBCardText>{product.category} </MDBCardText>
</MDBCardBody>
</MDBCol>
</MDBRow>
</MDBCard>
<p>
{relatedProducts.map((e) => e.name)}
</p>
</>
);
};
export default ProductDescriptionPage;
this is the implementation from backend
router.get("/related/:id", (req, res) => {
productModel
.findById(req.params.id)
.then((product) => {
if (!product) {
res.status(401).json({
error: `there is no such product`,
});
}
let limit = req.query.limit ? parseInt(req.query.limit) : 6;
productModel
.find({ _id: { $ne: product._id } })
.where("category")
.equals(product.category)
.limit(limit)
.then((products) => {
console.log(products);
res.json({
data: products,
});
});
})
.catch((err) => {
res.status(500).json({
error: err,
});
});
}
);
first time when I add the map
after refreshing the browser

Answer 1

There might be three solutions to it,
CASE 1.
You need to change the useState of
const [relatedProducts, setRelatedProducts] = useState(null)
to something like this
const [relatedProducts, setRelatedProducts] = useState([])
and inside the return use "?" to relatedProducts?.map()
CASE 2:
Please check what is the value that you are getting from the backend for the related products by using console.log()
CASE 3:
you are mapping the wrong items like e.name might not exist.
DEFAULT:
please provide us the screenshot of the error so that we can tell you the exact problem.
Thanks.