Rendering carousels in reactjs

Question

I have a json schema, on depending this schema I want to show the slider/carousel, So if the json schema has 3 Objects, I want to render Slider 3 times in ReactJS Component and images in that Object's Array as well in the slider / carousel.

Let's say I have 3 Objects in my json then this Carousel should be rendered 3 times

import APIData from "../../data/api.json";
            <Carousel {...settings}>
              {APIData.map((data, index) => {
                data.images.map((images, index) => {
                  return <img key={index} src={images} alt={index} />;
                });
              })}
            </Carousel>

How many times will I have to map that and how can I do that?

api.json

[
  {
    "id": "DR001",
    "propertyFullName": "8838, Brook St, NY",
    "propertyShortName": "Anchorage, AK 99501",
    "features": ["2 beds", "1 bath", "865 sqft"],
    "description": "data.",
    "images": [
      "http://placehold.it/1000x400/ffffff/c0392b/&text=slide1",
      "http://placehold.it/1000x400/ffffff/c0392b/&text=slide2",
      "http://placehold.it/1000x400/ffffff/c0392b/&text=slide3",
      "http://placehold.it/1000x400/ffffff/c0392b/&text=slide4",
      "http://placehold.it/1000x400/ffffff/c0392b/&text=slide5",
      "http://placehold.it/1000x400/ffffff/c0392b/&text=slide6"
    ],
    "status": true
  },
  {
    "id": "DR002",
    "propertyFullName": "8838, Brook St, NY",
    "propertyShortName": "Anchorage, AK 99501",
    "features": ["2 beds", "1 bath", "865 sqft"],
    "description": "data.",
    "images": [
      "http://placehold.it/1000x400/ffffff/c0392b/&text=slide1",
      "http://placehold.it/1000x400/ffffff/c0392b/&text=slide2",
      "http://placehold.it/1000x400/ffffff/c0392b/&text=slide3",
      "http://placehold.it/1000x400/ffffff/c0392b/&text=slide4",
      "http://placehold.it/1000x400/ffffff/c0392b/&text=slide5",
      "http://placehold.it/1000x400/ffffff/c0392b/&text=slide6"
    ]
  }
]

Answer 1

Our APIData is array of objects, the object structure is this.

{
  "id": "DR001",
  ... fields,
  "images": [
    "http://placehold.it/1000x400/ffffff/c0392b/&text=slide1",
    "http://placehold.it/1000x400/ffffff/c0392b/&text=slide2"
  ],
}

We need to wrap every object with the Carousel Component so first we loop over the APIData array with Array.map which gives us an object with each iteration, we then loop over the images array inside of that object and render an img tag with the source of the image for every image in the array.

// If all what we are doing is returning something from an arrow function
// we can omit the return statement and the {} and just wrap it in () or not wrap it
// at all but with () it is more readable
APIData.map(data => (
  <Carousel key={data.id} {...settings}>
    {data.images.map(imgSrc => (
      <img key={imgSrc} src={imgSrc} alt={data.propertyFullName} />
    ))}
  </Carousel>
));

To see what the map is doing you can execute this code.

APIData.map((data, index) => {
  console.log(`Outer map iteration number ${index + 1}`);
  console.log('Outer map data', data);
  console.log('Inner map within the outer map');
  data.images.map(img => {
    console.log(img);
  });
});