title: Error in map function / Objects are not valid as a React child / React.js
body: <p>I'm making a application using React.js. I fetch some data using API and I'm trying to show that data in a list. Currently I receive the following error when I tried to iterate through the data.</p>
  
  <blockquote>
    <p>Objects are not valid as a React child (found: object with keys {USDUSD, USDEUR, USDCAD, USDAUD}). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons. Check the render method of `Exchange</p>
  </blockquote>
  
  <p>Even though I store the data in array, this error appears.</p>
  
  <p>I checked that there is a similar thread related this error : <a href="https://stackoverflow.com/questions/41604539/objects-are-not-valid-as-a-react-child">Objects are not valid as a React child</a>, but these answer does not help my case.</p>
  
  <p>Here is my code.</p>
  
  <pre><code>import React from 'react';
  import axios from 'axios';
  
  const baseUrl = 'http://apilayer.net/api/historical?'
  const API_KEY = 'API_KEY'
  const date = '2017-10-22';
  const currencies = 'USD,EUR,CAD,AUD';
  const format = 1;
  
  
  export default class Exchange extends React.Component {
  
  constructor(props) {
      super(props);
      this.state = {
          item : []
      };
  }
  
  componentDidMount(){
  const url = `${baseUrl}${API_KEY}&amp;date=${date}&amp;currencies=${currencies}&amp;format=${format}`
  axios.get(url)
       .then(({data}) =&gt; {
          this.state.item.push(data.quotes);
          this.setState({
              item: this.state.item
          });
       })
       .catch((err) =&gt; {})
   console.log("item" + this.state.item)
   }
  
  render() {
  const rate = this.state.item.map((element, index)=&gt;{
     console.log("element" + element)
  return &lt;div key={index}&gt;
          &lt;p&gt;{element}&lt;/p&gt;
          &lt;/div&gt;
   }); 
  
      return (
          &lt;div&gt;
          &lt;div&gt;Exchange&lt;/div&gt;
          &lt;ul&gt;Today's rate
          &lt;li&gt;{ rate }&lt;/li&gt;
          &lt;/ul&gt;
         &lt;/div&gt;
          )
      }
   }
  </code></pre>