React - Array of images not rendering properly

Question

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?

jaybhatt · Accepted Answer · 2021-05-21 18:39:33Z

3

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>

answered May 21, 2021 at 18:39

jaybhatt

5462 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

simon sjöö Over a year ago

Yup, that fixed it! Thank god you saw it... I didn't! haha

jaybhatt Over a year ago

@simon If this answer makes things work, will really appreciate if you could accept it as correct answer :)

HardCoreQual · Accepted Answer · 2021-05-21 18:44:02Z

0

are you missing .images and try get url from media[0].url

   <div>
    {props.media?.images?.map((image) => {
      return <h1>{image.url}</h1>;
    })}
  </div>

answered May 21, 2021 at 18:44

HardCoreQual

4112 gold badges4 silver badges12 bronze badges

Collectives™ on Stack Overflow

React - Array of images not rendering properly

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related