Slide effect is not working in react-owl-carousel after adding data dynamically to carousel

Question

I am using react-owl-carousel in my react js project.

Initially, I am loading 5 items through an API call and after that, I am doing an API call on the click of the next button to get the next data. The issue is the data is updating properly but the slide effect of the carousel is gone. I have tried to add animateIn option also but it didn't work.

I am also using slideBy option with value 5 to slide 5 images at once and get the next 5 images from API call.

Can anyone help me with this?

Answer 1

Its is working fine for me.

You have to install react-owl-carousel correctly by using

npm install react-owl-carousel

then configure the plugin in web-pack you can only do this ejecting the project using npm run eject.

write the below code in same place where I have marked.

plugins: [
    // other plugins,
    new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        'window.jQuery': 'jquery'
    }),
],

You can find the below code for reference.

import React, { Component } from 'react';
import logo from './logo.svg';
import OwlCarousel from 'react-owl-carousel';
import '../node_modules/owl.carousel/dist/assets/owl.carousel.css';
import '../node_modules/owl.carousel/dist/assets/owl.theme.default.css';

class App extends Component {

  state = {
    item : [1,2,3],
    divPush : []
  }

  showData = () => {
    let { divPush } = this.state
    this.state.item.map((data,index) => {
      divPush.push(<div
        style={{
          backgroundColor : "green",
          padding : 10
        }}
      >
        I am {index + 1} div
      </div>)
      this.setState({ divPush })
      console.log("I am printing")
      return(
        <div
          style={{
            backgroundColor : "green",
            padding : 10
          }}
        >
          I am {index + 1} div
        </div>
      )
    })
  }

  update = () => {
    let { divPush } = this.state
    let length = divPush.length
    divPush.push(<div
      style={{
        backgroundColor : "green",
        padding : 10
      }}
    >
      I am div {length}
    </div>)
    this.setState({ divPush })
  }

  render(){
    return (
      <div style={{
        width : "100%",
        height : "100%",
        display : "flex",
        flexDirection : "column"
      }}>

        <OwlCarousel
          className="owl-theme"
          loop
          margin={10}
          nav
        >

            {this.state.divPush.map((data) => {
              return(data)
            })}

        </OwlCarousel>
          <div
            style={{
              marginTop : 20
            }}
          >
          <button
            onClick={this.update}
        >
          Add new
        </button>
          </div>
      </div>

    );
  }
}

export default App;

Answer 2

'Wait' for the dynamic data

class Room extends Component {
    state = { 
        product: {},
     }

    async componentDidMount() {
        const response = await axios.get('https://product-backend/api/end-point')
        .then((response) => {
            const {data: product} = response.data;

            this.setState({product});
        })
        .catch( (error) => {
          if (error.response) {
            this.props.history.push("/not-found");
          }
        });
    }

    render() { 
        const {product} = this.state;

        return ( 
            <React.Fragment>
                {product.photos && 
                   <OwlCarousel className='owl-theme' items={1} loop margin={10} nav> 
                       {product.photos && product.photos.map(photo =>
                           <div key={photo.id}>
                               <img className="img-responsive" src={product.photo_path + photo.photo} />
                           </div>
                        )}
                   </OwlCarousel>
                }
           </React.Fragment>
       )
}

The waiting is in {product.photos && ... line

Answer 3

try using a key property on the owl carousel div like this:

  <OwlCarousel
                    className="owl-theme"
                    // loop
                    // margin={10}
                    // nav
                    items={3}
                    dots
                    mouseDrag={false}
                    stagePadding={0}
                    key={`carousel_${changingStateIdentifier}`}
             >

As suggested here: https://hashnode.com/post/react-js-render-method-called-with-state-update-but-component-view-did-not-update-cjq7ohku100dm57s1yk6qvp56

This property also needs to be different before and after updating carousel content, so you can use another state variable to do that.