I only returning 1 card an an image from the array of objects using React js

Question

I have this data

[
    {
        "filePath": "imageFile",
        "locationName": "name1"
    },
    {
        "filePath": "imageFile",
        "locationName": "name2"
    }
]

and I am returning the value of filePath to display images using React js in a card like this:

const images = (displayimage) => {

      return displayImages.map((displayimage, key) => (
        <div key={key}>
          <div className="card bg-light mb-3">
            <div className="card-header">
              <center>{displayimage.locationName}</center>
            </div>
            <div className="card-body">
              <div className="imgDiv">
                <img src={displayimage.filePath} />
              </div>
            </div>
          </div>
        </div>
      ));
    }
  return <div>{images()}</div>;
};

but only 1 card is returning then the image is returning randomly based on which object is displayed 1st in the console.log(displayImages).

how can I display all each cards per images? Thanks

You have `` instead of ``. Also I don't understand why you defined `images` as a function and what the outer `displayImage` param should be, given that you don't use that param anywhere in the function's body. — lbsn, Dec 16 '21 at 09:15
Sorry I'll edit that part. I also tried the ```images``` that is not a function, same reult. 1 card and an image of the first object. — Renz, Dec 16 '21 at 09:19

score 0 · Accepted Answer · answered Dec 16 '21 at 09:35

0

What you need to store in the images constant is just the result of calling map() on your displayImages array. So assuming you have:

const displayImages = [
   {
    filePath: "imageFile",
    locationName: "name1"
   },
   {
    filePath: "imageFile",
    locationName: "name2"
   }
];

this is how your component should look like:

const images = displayImages.map((displayimage, key) => (
    <div key={key}>
      <div className="card bg-light mb-3">
        <div className="card-header">
          <center>{displayimage.locationName}</center>
        </div>
        <div className="card-body">
          <div className="imgDiv">
            <img src={displayimage.filePath} />
          </div>
        </div>
      </div>
    </div>
  ));
  return <div>{images}</div>;

Working stackblitz

answered Dec 16 '21 at 09:35

lbsn

2,322
1
11
19

I tried it in stackblitz, and working but when I executed it in my code, It only renders 1 image. What could possibly go wrong? Am I suppose to use forEach to get all the images? – Renz Dec 17 '21 at 06:13
@Renz It's hard to tell without seeing more of your code. Are you fetching your data from an API? In that case are you sure the API is returning more than one image? It would help if you could put together a stackblit reproducing your issue. – lbsn Dec 17 '21 at 10:08
It is working now. The way I am using useState to store the array is wrong. I used ``` setDisplayImages((prevState) => [...prevState, day]); ``` from https://stackoverflow.com/questions/66560016/why-usestate-hook-dont-update-while-using-loop-inside-useeffect – Renz Dec 20 '21 at 01:25

score 0 · Answer 2 · answered Dec 16 '21 at 09:44

It looks like your function takes in an argument displayimage but then you map over a variable called displayimages (note the s), .

Additionally when you call the function in the return statement there are no arguments provided.

I'm not sure if you've addressed the above issues in your actual code, but it would definitely create problems.

If you have addressed those problems what I would recommend is creating a component called something like ImageCard that takes in the image location name and file path as props, e.g.

const ImageCard= ({locationName,imagePath}) => {

      return (
        <div>
          <div className="card bg-light mb-3">
            <div className="card-header">
              <center>{locationName}</center>
            </div>
            <div className="card-body">
              <div className="imgDiv">
                <img src={filePath} />
              </div>
            </div>
          </div>
        </div>)
};
export default ImageCard;

Then, where you are currently doing your map, iterate over your image data in the return as follows (assuming your data is called displayImages)

return (
 displayImages.map(displayImage=>{
  return (
    <ImageCard
      locationName={displayImage.locationName}
      imagePath={displayImage.filePath}
    />
  );
 }
)

Thank you for the answer, I executed it in my code, It only renders 1 image. What could possibly go wrong? Am I suppose to use forEach to get all the images? — Renz, Dec 17 '21 at 06:14
What does your displayImages show if you console log it? You'd need to map over all the images / have them all available for the map in my example to work — adrian, Dec 17 '21 at 06:20

I only returning 1 card an an image from the array of objects using React js

2 Answers2