title: How to set JSON array to state in React?
body: <p>I have this bellow App.js code:</p>
  <pre><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 =&gt; {
              const data = response.data.map(( data )=&gt;{
                  this.setState({
                      item : data
                  });
              });
          })
          .catch( error =&gt; {
              alert( error );
          });
      }
  
      prepare() {
          console.log( this.state.item );
      }
  
      render() {
          return (
              &lt;div&gt;{this.prepare()}&lt;/div&gt;
          )
      }
  }
  
  export default Axios;
  </code></pre>
  <p>My goal is to get the <strong>common</strong> name from this API: <code>https://restcountries.com/v3.1/capital/lima</code></p>
  <p>Now on <code>componentDidMount()</code> method, I need to set the API return data to the <code>item</code> state so that I can loop through using the <code>prepare</code> method.</p>
  <p>But I don't have any idea how to set the API return <strong>array JSON data</strong> to the <code>item</code> state?</p>