Search code examples
reactjsaxiosreact-component

displaying array in component populated by Axios get request

I have a react component that uses Axios to get a bunch of photos from an API.

It works, but now I don't know how to display the images in the component.

How can I use the array of photos and display them in my component?

Here is a screenshot of the array returned by axios:

enter image description here

Here is my component:

class ImagePlayer extends Component {

componentDidMount() {
    axios.get(`/api/gameRPG/monsterImages/${this.props.encounterId}/pics`)
        .then((response) => {
            console.log(response);
        })
        .catch((error) => {
            console.log(error);
        });

}
render() {
    return (
        <div>
            <div>Show Encounter Pics</div>
            <div></div>
        </div>
    );
}
}

export default ImagePlayer;

Thanks!

Solution

  • You can store the response data into component's state:

    this.setState({photos: response.data})

    And then use the component's state in the render method:

    this.state.photos.map((photo) => ...some render logic here...)

    If you're building some kind of bigger / production app, i suggest to externalize data from local component's state to state container (redux) and use middleware to query backend (no axios calls directly in your component).