Copy Below Code View As A Text File Show Text Only Show API Edit Code

                            
Problem=When I place static html it displays the data properly in carousel but when I try to display dynamic data (using axios) then carousel is always blank.

Solution:

Actually at start the State has empty and after axios call it gets data but Owlcarousel does not refresh or update it uses the previous state therefore it remain blank.

So i just add a Length check and it works fine.

Code:

{this.state.testimonials.length && (
            <OwlCarousel className='owl-theme owl-carousel testimonials_list unorderList' loop margin={10} nav>
            {this.state.testimonials.map((item) =>
              <li class="item"></li>
          </li>
       )}
</OwlCarousel>
 )}