Images wont render when loaded dynamically

[daniwaxman]

I am load the images from an API response but they are not rendering in the carousel. Here is my code- I have added an additional rendering of the images just to show that in fact they are being returned.

import React, { Component } from "react";
import "./App.css";
import InfiniteCarousel from "react-leaf-carousel";
import axios from "axios";

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      data: []
    };
  }

  componentDidMount() {
    axios
      .get("https://randomuser.me/api/?results=5")
      .then(response => this.setState({ data: response.data.results }));
  }

  render() {
    let images = this.state.data.map(image => {
      return <img key={image.cell} src={image.picture.large} alt="" />;
    });

    if (this.state.data) {
      return (
        <div className="App">
          <InfiniteCarousel
            breakpoints={[
              {
                breakpoint: 500,
                settings: {
                  slidesToShow: 2,
                  slidesToScroll: 2
                }
              },
              {
                breakpoint: 768,
                settings: {
                  slidesToShow: 3,
                  slidesToScroll: 3
                }
              }
            ]}
            dots={false}
            showSides={true}
            sidesOpacity={0.5}
            sideSize={0.1}
            slidesToScroll={4}
            slidesToShow={4}
            scrollOnDevice={true}
          >
            {this.state.data.map(image => {
              return (
                <div key={image.cell}>
                  <img key={image.cell} src={image.picture.large} alt="" />
                </div>
              );
            })}
          </InfiniteCarousel>
          {this.state.data.map(image => {
            return (
              <div key={image.cell}>
                <img key={image.cell} src={image.picture.large} alt="" />
              </div>
            );
          })}
        </div>
      );
    } else {
      return <div className="App">Loading</div>;
    }
  }
}

export default App;

[daniwaxman]

Was my mistake. I figured it out. Tnx

[justin22]

Having similar issue. Even though the items props changes, the carousel is not re-rendering. @daniwaxman How did you resolve this? I can see the props of the carousel is updating, but the same is not updated in the UI.

[edmondko]

I have the same problem, loading the initial images works fine, but after adding more images they don't render at all