I'm making a carousel with images from Instagram using react-id-swiper. The Swiper component doesn't seem to be updating after the response. I thought that putting my setState inside componentWillMount would work but apparently not. When I open the inspector in Chrome it starts working?

import React, { Component } from 'react'
import Swiper from 'react-id-swiper'
import request from 'superagent'
import './index.css'

const swiperParams = {
  slidesPerView: 5,
  spaceBetween: 0,
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev'
  },
  pagination: {
    el: '.swiper-pagination',
    clickable: true
  },
}

class Carousel extends Component {
  constructor(props) {
    super(props)
    this.state = {
      photos: []
    }
  }

  componentWillMount() {
    this.fetchPhotos();
  }

  fetchPhotos() {
    request
      .get('/?access_token=' + process.env.INSTAGRAM_ACCESS_TOKEN)
      .then((res) => {
        this.setState({
          photos: res.body.data
        })
      })
  }

  render() {
    return (
      <Swiper {...swiperParams}>
        {this.state.photos.map((photo, key) => {
          return (
            <div key={photo.id}>
              <img src={photo.images.standard_resolution.url} alt={photo.caption} />
            </div>
          )
        })}
      </Swiper>
    )
  }
}

export default Carousel

I'm making a carousel with images from Instagram using react-id-swiper. The Swiper component doesn't seem to be updating after the response. I thought that putting my setState inside componentWillMount would work but apparently not. When I open the inspector in Chrome it starts working?

import React, { Component } from 'react'
import Swiper from 'react-id-swiper'
import request from 'superagent'
import './index.css'

const swiperParams = {
  slidesPerView: 5,
  spaceBetween: 0,
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev'
  },
  pagination: {
    el: '.swiper-pagination',
    clickable: true
  },
}

class Carousel extends Component {
  constructor(props) {
    super(props)
    this.state = {
      photos: []
    }
  }

  componentWillMount() {
    this.fetchPhotos();
  }

  fetchPhotos() {
    request
      .get('https://api.instagram.com/v1/users/self/media/recent/?access_token=' + process.env.INSTAGRAM_ACCESS_TOKEN)
      .then((res) => {
        this.setState({
          photos: res.body.data
        })
      })
  }

  render() {
    return (
      <Swiper {...swiperParams}>
        {this.state.photos.map((photo, key) => {
          return (
            <div key={photo.id}>
              <img src={photo.images.standard_resolution.url} alt={photo.caption} />
            </div>
          )
        })}
      </Swiper>
    )
  }
}

export default Carousel

• javascript
• reactjs
• instagram-api
• superagent

• Can you see the outgoing request in the network tab of the developer tools? – user5734311 Commented Jun 11, 2018 at 20:28
• Thanks for the reply. Yes, the images are loaded in, the carousel just doesn't seem to understand how many there are and it can't be swiped through etc. except when I open the developer tools which seems to trigger an update. – Alex Smith Commented Jun 11, 2018 at 23:03

4 Answers 4

In your object swiperParamas include the following propertie

rebuildOnUpdate: true

I found this issue on the react-id-swiper github, which solved my problem.

I simply had to add the shouldSwiperUpdate prop to my Swiper component. The component now looks like this:

<Swiper {...swiperParams} shouldSwiperUpdate>
  ...
</Swiper>

This updates Swiper every time the component gets re-rendered.

try add observer: true, to params

You need map in array outside the render:

const swiperItems = this.state.photos.map((photo, key) => {
   return (
     <div key={photo.id}>
       <img src={photo.images.standard_resolution.url} alt={photo.caption} />
     </div>
   )
})

return (
    <Swiper {...swiperParams}>
        {swiperItems}
    </Swiper>
)

This worked for me.