CODEWITHSUNDEEP
javascriptreactjs
simon sjöö
simon sjöö

Reputation: 395

React - Array of images not rendering properly

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: enter image description here

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

Answers (2)

HardCoreQual
HardCoreQual

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

jaybhatt
jaybhatt

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

Related Questions