Рендеринг каруселей в reactjs

Прокрутите каждый элемент APIData и верните карусель с изображений

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

import React from "react";
import APIData from "../../data/api.json";
import Carousel from '....';

export default class SimpleSlider extends React.Component {

    sliders(){
       return APIData.map(({id,images}) => {
        return (
           <Carousel {...settings} key = {id}>
             {images.map(({image}) => {
                return <img key = {image} src = {image} alt = {image}/>;
             });}
           </Carousel>
        )
      })
    }

    render() {
      return (
       {this.sliders()}
      );
   }
}

Наш APIData - это массив объектов, структура объекта такая.

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

Нам нужно обернуть каждый объект компонентом Carousel, поэтому сначала мы перебираем массив APIData с помощью Array.map, который дает нам object с каждой итерацией, затем мы перебираем массив images внутри этого объекта и визуализируем тег img с источником изображение для каждого изображения в массиве.

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

Чтобы увидеть, что делает map, вы можете выполнить этот код.

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