Carousel renders before children

[annamasc]

<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?

[chulphan]

Same issue. Did you solve it?

[annamasc]

@chulphan We tried a few things with no luck at all, let me know if you come up with something! If we can't find a solution before our release we'll have to change libraries

[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>

[chulphan]

@Balyasov Wow!!!! It's work for me!! thank you very much.

[sahilchopra]

Any other approach for this? In async rendering some time it is working or some time not by adding key (with a dynamic value )

Thanks

[josemurillodev]

Same issue, translations (state changes) not working on first render

[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