How to set JSON array to state in React?

November 11, 2021

I have this bellow App.js code:

import React, { Component } from 'react';
import axios from 'axios'


class Axios extends Component {

    constructor() {
        super();
        this.state = {
            item : '',
        }
    }

    componentDidMount() {
        axios.get('https://restcountries.com/v3.1/capital/lima')
        .then( response => {
            const data = response.data.map(( data )=>{
                this.setState({
                    item : data
                });
            });
        })
        .catch( error => {
            alert( error );
        });
    }

    prepare() {
        console.log( this.state.item );
    }

    render() {
        return (
            <div>{this.prepare()}</div>
        )
    }
}

export default Axios;

My goal is to get the common name from this API: https://restcountries.com/v3.1/capital/lima

Now on componentDidMount() method, I need to set the API return data to the item state so that I can loop through using the prepare method.

But I don’t have any idea how to set the API return array JSON data to the item state?

>Solution :

Update your state.item to a blank array.

constructor() {
    super();
    this.state = {
        item : [],
    }
}

In componentDidMount(), update the code to accept response :

 componentDidMount() {
    axios.get('https://restcountries.com/v3.1/capital/lima')
    .then( response => {
        this.setState({
                item : response.data
            });
    })
    .catch( error => {
        alert( error );
    });
}

In render(), you can use map on state.item and can loop on it.

render() {
    return (
        <div>{this.state.item.map(data,index)=>(
              //some UI mapping to each `data` in `item` array
        )}</div>
    )
}