title: Render images in Array
body: <p>I've a JSON Schema which has Array of images which I need to render into a carousel in ReactJS. </p>
  
  <p><code>api.json</code></p>
  
  <pre><code>[
    {
      "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/&amp;text=slide1",
        "http://placehold.it/1000x400/ffffff/c0392b/&amp;text=slide2",
        "http://placehold.it/1000x400/ffffff/c0392b/&amp;text=slide3",
        "http://placehold.it/1000x400/ffffff/c0392b/&amp;text=slide4",
        "http://placehold.it/1000x400/ffffff/c0392b/&amp;text=slide5",
        "http://placehold.it/1000x400/ffffff/c0392b/&amp;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/&amp;text=slide1",
        "http://placehold.it/1000x400/ffffff/c0392b/&amp;text=slide2",
        "http://placehold.it/1000x400/ffffff/c0392b/&amp;text=slide3",
        "http://placehold.it/1000x400/ffffff/c0392b/&amp;text=slide4",
        "http://placehold.it/1000x400/ffffff/c0392b/&amp;text=slide5",
        "http://placehold.it/1000x400/ffffff/c0392b/&amp;text=slide6"
      ]
    }
  ]
  </code></pre>
  
  <p>I am hard-coding the first array i.e. <code>features</code> like this </p>
  
  <pre><code>{APIData.map((apiData, index) =&gt; {
                    return (
                      &lt;&gt;
                        &lt;Heading subtitle&gt;
                          &lt;span name={index}&gt;{apiData.features[0]}&lt;/span&gt;
                          &lt;span class="middle-dot" aria-hidden="true"&gt;
                            &amp;nbsp;
                          &lt;/span&gt;
                          &lt;span&gt;{apiData.features[1]}&lt;/span&gt;
                          &lt;span class="middle-dot" aria-hidden="true"&gt;
                            &amp;nbsp;
                          &lt;/span&gt;
                          &lt;span&gt;{apiData.features[2]}&lt;/span&gt; &lt;br /&gt;
                          &lt;span&gt;
                            &lt;p&gt;{apiData.description}&lt;/p&gt;
                          &lt;/span&gt;
                        &lt;/Heading&gt;
                        &lt;hr /&gt;
                      &lt;/&gt;
                    );
                  })}
  </code></pre>
  
  <p>Because, I know there will be only 3 features, but in case of <code>images</code>, it is dynamic. How come I overcome this?</p>
  
  <p>The images are rendering in an other <code>&lt;div&gt;</code>, I've tried something like this </p>
  
  <pre><code>            &lt;Carousel {...settings}&gt;
                {APIData.map((images, index) =&gt; {
                  return (
                    &lt;&gt;{&lt;img src={images.images} alt={index} /&gt;}&lt;/&gt;
                  );
                })}
              &lt;/Carousel&gt;
  </code></pre>