React Owl Carousel 2.3.3 - I loose dynamic data after refreshing page. Working fine on local data

Question

I am using json-server and fetching data using fetch. First time I get data properly in an Owl Carousel and the slider works fine but after when I refresh the page all my dynamic data wipe out. Still my carousel slides but with no data. Also I have attached a jquery script https://code.jquery.com/jquery-3.2.1.slim.min.js in index.html. I am loosing my Owl Carousel Dynamic Data which I am using through map method in the Owl Carousel Component. Below is the code where I am using my slider. Please help me to find where I am doing wrong. Thank You.

---------------
<<<<<- Below code is MainSlider.js ->>>>>

    import React, { useReducer, useEffect } from "react";
    import OwlCarousel from "react-owl-carousel";
    import "owl.carousel/dist/assets/owl.carousel.css";
    import { mainSliderReducer } from "../reducers/mainSliderReducer";
    
    const API = "http://localhost:8000/mainSlider";
    
    const initialState = {};
    
    const MainSlider = () => {
      const [state, dispatch] = useReducer(mainSliderReducer, initialState);
      const { data } = state;
    
      useEffect(() => {
        getData();
      }, []);
    
      const getData = () => {
        fetch(API)
          .then((res) => {
            if (res.ok) {
              return res.json();
            } else {
              console.log("DATA NOT FOUND. SOME ERROR");
              throw new Error("ERROR FETCHING DATA");
            }
          })
          .then((data) => dispatch({ type: "GET_MAINSLIDER_DATA", payload: data }))
          .catch((err) => console.log(err));
      };
    
      console.log(data);
    
      return (
        <>
          <OwlCarousel className="owl-theme" loop margin={10} nav>
            {data ? (
              data.map((item) => {
                const { id, heading, description, img, smallHeading } = item;
                return (
                  <section key={id} className="dvMainSlider">
                    <div className="item bg bgcolor1 pb-md-5 pt-md-4 py-xl-0 h-100vh h-sm-auto h-xl-100vh">
                      <div className="container">
                        <div className="row slideInfo h-xl-100vh align-items-xl-center">
                          <div className="col-md-6 text-center">
                            <img
                              src={img}
                              className="img-fluid d-inline-block"
                              alt=""
                            />
                          </div>
                          <div className="col-md-6 pt-lg-5 pt-xl-0 description">
                            <h1 className="text-white">{heading}</h1>
                            <h4 className="text-white">{smallHeading}</h4>
                            <p className="text-white">{description}</p>
                            <a href="--" className="btn btnPrimary mb-3 mt-sm-3">
                              Shop More
                            </a>
                          </div>
                        </div>
                      </div>
                    </div>
                  </section>
                );
              })
            ) : (
              <h1>"SLIDE NOT FOUND"</h1>
            )}
          </OwlCarousel>
        </>
      );
    };
    
    export default MainSlider;

    
    <<<<<- Below code is mainSliderReducer.js ->>>>>
   
    export const mainSliderReducer = (state, action) => {
      console.log(state, action);
      switch (action.type) {
        case "GET_MAINSLIDER_DATA":
          return { ...state, data: action.payload };
        default:
          return state;
      }
    };

---

Answer 1

Hey I found my own question's answer and i found the way which i am sharing to you all. Just check if data is available then only you load the Owl Carousel Component. Check the code below for better understanding.

{data && (
        <OwlCarousel {...options}>
          {data.map((item) => {
            const { id, heading, description, img, smallHeading } = item;
            return (
              <section key={id} className="dvMainSlider">
                <div className="item bg bgcolor1 pb-md-5 pt-md-4 py-xl-0 h-100vh h-sm-auto h-xl-100vh">
                  <div className="container">
                    <div className="row slideInfo h-xl-100vh align-items-xl-center">
                      <div className="col-md-6 text-center">
                        <img
                          src={img}
                          className="img-fluid d-inline-block"
                          alt=""
                        />
                      </div>
                      <div className="col-md-6 pt-lg-5 pt-xl-0 description">
                        <h1 className="text-white">{heading}</h1>
                        <h4 className="text-white">{smallHeading}</h4>
                        <p className="text-white">{description}</p>
                        <a href="--" className="btn btnPrimary mb-3 mt-sm-3">
                          Shop More
                        </a>
                      </div>
                    </div>
                  </div>
                </div>
              </section>
            );
          })}
        </OwlCarousel>
      )}