Reputation: 395
Working on a project here and I ran into an issue. I am using an API and I receive images of a product. It looks like this:
The issue I am having is that the image doesn't appear on my page, nothing at all appears. Even if I try to just write the link in an <h1>
tag, nothing appears. I tried to log the URLs in console, and it works there using the .map
method.
I have tried with Object.keys()
and array.map()
, but non of them work.
Here is my API fetch code:
useEffect(() => {
const options = {
method: "GET",
url: "https://asos2.p.rapidapi.com/products/v3/detail",
params: params,
headers: {
"x-rapidapi-key": "",
"x-rapidapi-host": "",
},
};
axios
.request(options)
.then(function (response) {
console.log(response.data);
setProduct(response.data);
})
.catch(function (error) {
console.error(error);
});
}, []);
// This works
product?.media?.images.map((item) => {
console.log(item.url);
});
return (
<div>
<Product
name={product?.name}
price={product?.price?.current?.text}
brand={product?.brand?.description?.replace(/(<([^>]+)>)/gi, "")}
brandName={product?.brand?.name}
aboutMe={product?.info?.aboutMe?.replace(/(<([^>]+)>)/gi, " ")}
careInfo={product?.info?.careInfo?.replace(/(<([^>]+)>)/gi, "")}
sizeAndFit={product?.info?.sizeAndFit?.replace(/(<([^>]+)>)/gi, "")}
media={product?.media?.images}
/>
</div>
);
And here is the product section where it shall render:
<div>
{props.media?.map((media) => {
<h1>{media.url}</h1>;
})}
</div>
The page is just completely blank.
What am I missing?
Upvotes: 0
Views: 126
Reputation: 391
are you missing .images and try get url from media[0].url
<div>
{props.media?.images?.map((image) => {
return <h1>{image.url}</h1>;
})}
</div>
Upvotes: 0
Reputation: 547
I think the return statement is missing in the map
<div>
{props.media?.map((media) => {
return(<h1>{media.url}</h1>);
})}
</div>
or you can also go for shorthand
<div>
{props.media?.map((media) => <h1>{media.url}</h1>)}
</div>
Upvotes: 3