Рендеринг изображений в массиве

Question

У меня есть JSON-схема с массивом изображений, которые мне нужно отобразить в карусели в ReactJS.

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"
    ]
  }
]

Я жестко кодирую первый массив, т.е. features вот так

{APIData.map((apiData, index) => {
                  return (
                    <>
                      <Heading subtitle>
                        <span name={index}>{apiData.features[0]}</span>
                        <span class="middle-dot" aria-hidden="true">
                          &nbsp;
                        </span>
                        <span>{apiData.features[1]}</span>
                        <span class="middle-dot" aria-hidden="true">
                          &nbsp;
                        </span>
                        <span>{apiData.features[2]}</span> <br />
                        <span>
                          <p>{apiData.description}</p>
                        </span>
                      </Heading>
                      <hr />
                    </>
                  );
                })}

Потому что я знаю, что будет только 3 функции, но в случае images, это динамично. Как мне это преодолеть?

Изображения отображаются в другом <div>, я пробовал что-то вроде этого

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

Answer 1

Используя код, который у вас уже был, в итоге получится что-то вроде этого, чтобы перебрать изображения для каждого свойства:

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

Answer 2

Вы можете иметь компонент без состояния и визуализировать его внутри оригинального map, например,

const Images = ({list}) => list.map(image => <img src={image}/>);

myArr.map(item => // some DOM here, and, at last: <Images list={item.images}>)

Вы знаете, чтобы не повторять вызов map внутри другого, который, на мой взгляд,выглядит немного некрасиво