First Element of owl-item is empty every time.

Hi,

I am using this library into my react component for some reasons, which i don’t know it’s creating first ow-item active empty.

`constructor(props) { super(props);

    this.state = {
        timeoutId: null,
        show: false,
        options: {
            items: 5,
            nav: true,
            rewind: true,
            autoplay: false,
            lazyLoad: true,
            mouseDrag: false,
            responsive: {
                responsiveRefreshRate: 100
            }
        }
    };
}

componentDidMount() {

    this.props.dispatch(getFlashSale());

    console.log('adil');

}

componentWillMount() {
    this.timeoutId = setTimeout(() => {
        this.setState({show: true});
    }, 1000);
}

componentWillUnmount() {
    if (this.timeoutId) {
        clearTimeout(this.timeoutId);
    }
}

createFlashListDOM() {
    return this.props.flashSaleList.map((obj, i) => (
        <FlashSaleItem row={obj} key={i} index={i}/>
    ));
}

render() {
    if (this.props.loader == true) {
        return <Loading/>
    } else {
        return (
            <div className={this.state.show ? 'flash-sale owl-after-load' : 'flash-sale'}>
                <div className="flash-sale-box">
                    <ul className="flash-sale-list">
                        <OwlCarousel options={this.state.options}>
                            {this.createFlashListDOM()}
                        </OwlCarousel>
                    </ul>
                </div>
            </div>
        );
    }
}

import React from 'react';

export default function FlashSaleItem(props) {
    return (
        <li key={props.index}>
            <div className="flash-sale-list-item">
                <a>
                    <div className="flash-sale-image">
                        <div className="flash-sale-image-inner">
                            <img src={props.row.IMAGE.SRC} alt="Loading ..."/>
                        </div>
                    </div>
                    <div className="flash-sale-title">
                        <p>{props.row.NAME}</p>
                    </div>
                    <div className="flash-sale-price">
                        <span className="old-price">{props.row.PRICES.PRICE_OLD} AED</span>
                        <span className="new-price text-bold">{props.row.PRICES.PRICE_NEW} AED</span>
                    </div>
                </a>
                <div className="pl-10 pr-10">
                    <div className="flash-sale-buy-now">
                        <a>
                            BUY NOW
                        </a>
                    </div>
                    <span className="flash-sale-timer">
                                <small className="text-bold">00  hrs. 28 min. 12 sec.</small>
                    </span>
                </div>
            </div>
        </li>
    );
}

`

Thanks Adil

[dumbest]

Add a condition to only render <OwlCarousel>{children}</OwlCarousel> when children.length > 0

[pshox]

@adilsaeed31

this works for me:

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

        if (!topList) return null;

        return (
            <OwlCarousel className="owl-theme" items={5} margin={10}>
                {
                    topList.map(
                        (user, key) => <TopCard key={key} user={user}/>
                    )
                }
            </OwlCarousel>
        );
    }