I've a JSON Schema which has Array of images which I need to render into a carousel in 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"
]
}
]
I am hard-coding the first array i.e. features
like this
{APIData.map((apiData, index) => {
return (
<>
<Heading subtitle>
<span name={index}>{apiData.features[0]}</span>
<span class="middle-dot" aria-hidden="true">
</span>
<span>{apiData.features[1]}</span>
<span class="middle-dot" aria-hidden="true">
</span>
<span>{apiData.features[2]}</span> <br />
<span>
<p>{apiData.description}</p>
</span>
</Heading>
<hr />
</>
);
})}
Because, I know there will be only 3 features, but in case of images
, it is dynamic. How come I overcome this?
The images are rendering in an other <div>
, I've tried something like this
<Carousel {...settings}>
{APIData.map((images, index) => {
return (
<>{<img src={images.images} alt={index} />}</>
);
})}
</Carousel>
Using the code you already had, it will end up something like this to iterate through the images for every property:
<Carousel {...settings}>
{APIData.map((data, index) => {
data.images.map((image, index) => {
return <img key={index} src={image} alt={index} />
}
})}
</Carousel>