React owl carousel is blank

Question

I am using React owl carousel to display dynamic carousel.

When I place static html it displays the data properly in carousel but when I try to display dynamic data (using axios) then carousel is always blank.

Note:: I fetch the data using axios and update the state which I use to loop the data.

Can someone explain what mistake I have done here as the carousel always remain blank.

All the code is in same file:

My code::

import React, { Component } from 'react';
import HeaderComponent from '../Common/Header';
import SidebarComponent from '../Common/Sidebar';
import TrendingStoriesComponent from './TrendingStories';
import FlashDealsComponent from './FlashDeals';
import WeeklyPicksComponent from './WeeklyPicks';
import OwlCarousel from 'react-owl-carousel';
import 'owl.carousel/dist/assets/owl.carousel.css';
import 'owl.carousel/dist/assets/owl.theme.default.css';

import axios from 'axios';
import moment from 'moment';

class HomeComponent extends Component {
    constructor(props) {
        super(props);

        this.state = {
            latest_stories: [],
        }
    }

    componentDidMount() {
        axios.get(process.env.REACT_APP_API_ENDPOINT+'/story/latest_stories')
            .then((response) => {
                // handle success
                console.log(response);
                this.setState({
                    latest_stories: response.data.response,
                });
            })
            .catch(error => {
                //Error object contains the response property
                console.log(error);
            });        
    }

    render() {
        return (
            <>

            <HeaderComponent />

            <SidebarComponent />

            <section className="weeklypick mt-4">
                <div className="weeklyslider">
                    <OwlCarousel
                        className="owl-theme"
                        loop
                        margin={10}
                        nav
                    >
                        {
                            this.state.latest_stories.map((story,index) => {
                                console.log(story);//this prints successfully everytime in loop

                                return <div className="item" key={'latest-story-'+index}>
                                    <div className="sliderbox">
                                        <h6>
                                            <span>25 Jan</span>
                                            <img src="assets/images/dropdown.svg" alt="" />
                                        </h6>
                                        <div className="sliderboxfield">
                                            <span className="yellowbadge">Adventures</span>
                                            <img src="assets/images/car1.svg" alt="" />
                                        </div>
                                        <div className="textboxfield">
                                            <p>I Visited Lush’s Biggest Ever Shop & The Treatments Will Truly Blow Your
                                                Mind</p>
                                            <ul>
                                                <li>
                                                    <a href="#">BY SARAH STEVENS</a>
                                                </li>
                                                <li>
                                                    <a href="#">
                                                        <img src="assets/images/heart.svg" alt="" />
                                                        <span className="likecount">3.2k</span>
                                                    </a>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            })
                        }
                    </OwlCarousel>

                </div>
            </section>

            </>
        );
    }
}

export default HomeComponent;

Answer 1

Seems like OwlCarousel dont re-render upon state change and as such even though your state updates and your callback sends it new set of children, OwlCarousel stays as is like initial render. It do have callback hooks that you can tie your updates into so that it will update using that but seems like very poor documentation so I did not spend time on it. There's something called onRefresh hook that you can use that takes in a function but again no example that tells you how to do it. https://owlcarousel2.github.io/OwlCarousel2/docs/api-events.html

To overcome this I wrapped OwlCarousel in the length check which will only render once state has something to render after API call returns.

        {this.state.latest_stories.length && (
          <OwlCarousel className="owl-theme" loop margin={10} nav>
            {this.state.latest_stories.map((story, index) => {
              console.log(story); //this prints successfully everytime in loop

              return (
                <>
                  <div className="item">
                    <h4>{story}</h4>
                  </div>
                </>
              );
            })}
          </OwlCarousel>
        )}

Here's the working example based on your code: https://codesandbox.io/s/recursing-hooks-gz5gl