title: React - Passing fetched data from API as props to components
body: <p>Iam trying to understand and learn how to pass around data as props to other components to use. Iam trying to build a top-level hierarchy where the API Request is made in a class at top level and then the result is passed around to child components to be used as props and then in states.</p>
  
  <p>The problem is that when i pass the result i get <strong>"Object Promise"</strong> in my child component. <strong>How do I access the data sent as props to child components?</strong></p>
  
  <p>As you can see in my <strong>App.js</strong> in my render() method that i created a component of the class API and pass the result from the <strong>fetchData()</strong> method as parameter to the component.</p>
  
  <p><strong>In my API.js class i used console.log</strong> to check the result but
  the result i get from the logs are: </p>
  
  <p><strong>line 5:</strong> {dataObject: Promise}</p>
  
  <p><strong>line 10:</strong> undefined</p>
  
  <p><strong>App.js:</strong></p>
  
  <pre><code>import API from './API';
  
  class App extends Component {
  
    componentDidMount(){
      this.fetchData();
    }
  
  
    fetchData(){
        const url = "https://randomuser.me/api/?results=50&amp;nat=us,dk,fr,gb";
        return fetch(url)
            .then(response =&gt; response.json())
            .then(parsedJSON =&gt; console.log(parsedJSON.results))
            .catch(error =&gt; console.log(error));
    }
  
    render() {
      return (
        &lt;div className="App"&gt;
          &lt;API dataObject={this.fetchData()}/&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default App;
  </code></pre>
  
  <p><strong>API.js</strong></p>
  
  <pre><code>import React from 'react';
  
  class API extends React.Component{
      constructor(props){
          console.log(props);
          super(props);
          this.state = {
              dataObj:props.dataObject
          };
          console.log(this.state.dataObject)
      }
  
  
      render() {
          return(
              &lt;p&gt;""&lt;/p&gt;
          )
      }
  }
  
  export default API;
  </code></pre>