Carousel renders before children

<OwlCarousel items={4}>
  {this.props.articles.map(
    (article, key) => (
      <div className="item" key={key}>
        ...
      </div>
    )
  )}
</OwlCarousel>

When mapping carousel items from Props, carousel renders before items. And it’s rendered empty. Is there any way to overcome this problem?

[Balyasov]

Try to add key to the OwlCarousel

<OwlCarousel key={`carousel_${this.props.articles.length}`} items={4}>
  {this.props.articles.map(
    (article, key) => (
      <div className="item" key={key}>
        ...
      </div>
    )
  )}
</OwlCarousel>

[Shubhamdutta2000]

I was facing same prblm its fixed by adding key to OwlCarousal component. Bt what actually happen and why its solved by adding key to component