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

Question

У меня есть схема json, в зависимости от этой схемы я хочу показать слайдер / карусель. Поэтому, если схема json имеет 3 объекта, я хочу визуализировать ползунок 3 раза в компоненте ReactJS и изображения в массиве этого объекта в слайдер / карусель.

Допустим, у меня в json 3 объекта, тогда эту карусель нужно рендерить 3 раза

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>

Сколько раз мне придется наносить на карту это и как я могу это сделать?

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

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

Answer 2

Наш 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.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);
  });
});

Answer 3

Цикл каждого APIData элемент и возврат карусель с изображениями

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