How to map all image url from array

Question

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.

A question to your code: does the variable "rest" contain a json object? — Reporter
– Reporter, Commented Apr 1, 2021 at 8:06

Abdullah Ch · Accepted Answer · 2021-04-01 08:32:27Z

1

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>
  );
};

edited Apr 1, 2021 at 8:32

answered Apr 1, 2021 at 8:23

Abdullah Ch

2,2032 gold badges18 silver badges40 bronze badges

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

Comments

Matthieu Bouxin · Accepted Answer · 2021-04-01 08:09:37Z

0

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} />;
    })}

answered Apr 1, 2021 at 8:09

Matthieu Bouxin

1271 silver badge5 bronze badges

2 Comments

Vardan Hambardzumyan Over a year ago

yes res in not an array, but my all images are in imagesData array, by the way I try as you write but still not working :/ codesandbox.io/s/hungry-franklin-bowhf

Matthieu Bouxin Over a year ago

don't know why but you have res.ImagesData not res.imagesData codesandbox.io/s/pensive-https-tqrlh

Collectives™ on Stack Overflow

How to map all image url from array

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related