CODEWITHSUNDEEP
javascriptreactjs
Vardan Hambardzumyan
Vardan Hambardzumyan

Reputation: 277

How to map all image url from array

Hi all I have following code: my code

I am receiving some response from backend.

I am trying to get all images from imagesData and show in ImageComponent component.

I am using map function in my main component in this way:

{!!res &&
    res.map((data) => 
    {
     return <ImageComponent key={data.publicId} {...data} />;
    })}

and here is my ImageComponent component:

const ImageComponent = ({ img }) => {
  return (
   <div>
     <img src={img} alt="pic" />
   </div>
  );
};

But something went wrong please help me to resolve this problem.

Upvotes: 0

Views: 1043

Answers (2)

Abdullah Ch
Abdullah Ch

Reputation: 2151

You're applying the map method on res, which is an object not an array. Map method is made for Arrays. All you have to do is access the image array present in you Object and then, apply the map.

Read about map here

  return (
    <div className="App">
      {!!res &&
        res.imagesData.map((data) => {
          return <ImageComponent key={data.publicId} {...data} />;
        })}
    </div>
  );

In your ImageComponent, you have to pass url in your destructured props as it is the url property that contains the actual url of your image


const ImageComponent = ({ url }) => {
  return (
    <div>
      <img src={url} alt="pic" />
    </div>
  );
};

Upvotes: 1

Matthieu Bouxin
Matthieu Bouxin

Reputation: 127

res is not an array.

From what I see I suppose you wanted to do this

{!!res &&
    res.imagesData.map((data) => 
    {
     return <ImageComponent key={data.publicId} {...data} />;
    })}

Upvotes: 0

Related Questions