CODEWITHSUNDEEP
javascriptreactjs
enoch
enoch

Reputation: 3123

How to create carousel of array data coming from the api

I am trying to create a carousel of images coming from the API. i have tried this 

<div>
    {
      images && images.map(
                 image=> {
                     return 
                         (
                           <Carousel>
                             <Carousel.Item>
                                <img src={`http://localhost:8000/${image.url}`} 
                                     width="300x" 
                                     alt="images" />
                             </Carousel.Item>
                           </Carousel>
                        )
                 })
   }
</div>

but it displays all the images

the sample of the image coming from api, i am using api platform

 "hydra:member": [
        {
            "@id": "/api/images/1",
            "@type": "Image",
            "id": 1,
            "file": null,
            "url": "/images/5e2a25820eac1350286144.jpg"
        },
        {
            "@id": "/api/images/2",
            "@type": "Image",
            "id": 2,
            "file": null,
            "url": "/images/5e2a258e5afde569450008.png"
        },
        {
            "@id": "/api/images/3",
            "@type": "Image",
            "id": 3,
            "file": null,
            "url": "/images/5e2a25988e0b7943696558.jpg"
        }
    ],

Upvotes: 0

Views: 712

Answers (1)

Furkan
Furkan

Reputation: 85

You have to put your images between Carousel.Item tag otherwise they will be in one slide. You need to do something like that.

state = {
  images: []
    }

componentDidMount () {
// fetch data 
// set it to image state
}

renderCarousel = () => {
const { images } = this.state;
return images.map(image => <Carousel.Item><Image src={image.url} /></Carousel.Item>)
}

render(){
return (
<div>
  <Carousel>
    {this.renderCarousel()}
  </Carousel>
</div>
)
}

your output should be like that

<Carousel>
  <Carousel.Item> image1 </Carousel.Item> 
  <Carousel.Item> image2 </Carousel.Item>
</Carousel>

Upvotes: 1

Related Questions