Search code examples
javascriptreactjsowl-carousel

How to remove Length Count on RectJS Owlcarousel

I am ttrying to show products data on an OwlCarousel in ReactJS and I am using this code to do so.

<div className="row section">
        {isLoading && <WidgetSkeleton cards={2} />}
      </div>
      {seedlings.length && (
        <OwlCarousel
          items={2}
          className="owl-theme"
          loop={false}
          nav={false}
          dots={false}
          stagePadding={30}
          responsiveClass={true}
          margin={16}
        >
          {seedlings.map((seedling) => (
            <ProductWidget seedling={seedling} key={seedling.seedlingid} />
          ))}
        </OwlCarousel>
      )}
    </div>

But now it displays an annoying Zero (0) when it loads before displating the data. How can I get rid of the 0? Kindly help?

It looks like this enter image description here

Solution 
  • {seedlings.length && (<MyComponent/>)}

    Will return 0 when seeedlings.length === 0. You can change the conditional render to this instead:

    {seedlings.length ? <MyComponent/> : null}