title: React - prop undefined
body: <p>I'm currently learning to build apps with React (not using Redux yet). So far everything is working as expected except when it comes to load the data (via ajax). Let me refine what I mean. </p>
  
  <p>I'm using the spotify API using the library "spotify-web-api-js". </p>
  
  <p>So far, I have 2 components: </p>
  
  <ol>
  <li>Search Field</li>
  <li>Display the list of Artists</li>
  </ol>
  
  <p>Of course everything is wired up on the App level. </p>
  
  <ol>
  <li>App Level </li>
  </ol>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>class App extends Component {
    constructor(props) {
      super(props);
  
      this.state = {
        artists: []
      }
  
      this.searchArtists('Chris');
    }
  
    searchArtists(artist) {
      api.searchArtists(artist, (err, data) =&gt; {
        if (err) { console.log(err); };
        this.setState({ artists: data }, () =&gt; {
          console.log(this.state.artists);
        });
      });
    }
  
    render() {
      const artistSearch = (artist) =&gt; { this.searchArtists(artist); };
  
      return (
        &lt;div&gt;
          &lt;Search onSearchTermChange={ artistSearch } /&gt;
          &lt;SearchResult artists={ this.state.artists.artists } /&gt;
        &lt;/div&gt;
      );
    }
  };</code></pre>
  </div>
  </div>
  </p>
  
  <ol start="2">
  <li>Search</li>
  </ol>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>class Search extends Component {
    constructor(props) {
      super(props);
  
      this.state = { artist: '' };
    }
  
    render() {
      return (
        &lt;div className="search-bar"&gt;
          &lt;input
            value={ this.state.artist }
            onChange={ event =&gt; this.onInputChange(event.target.value) }
            placeholder="Search by Artist" /&gt;
        &lt;/div&gt;
      );
    }
  
    onInputChange(artist) {
      this.setState({ artist });
      this.props.onSearchTermChange(artist);
    }
  }
  
  export default Search;</code></pre>
  </div>
  </div>
  </p>
  
  <ol start="3">
  <li>Search Results</li>
  </ol>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const SearchResult = props =&gt; {
    if (!props) {
      console.log('loading');
    }
  
    return &lt;li&gt;&lt;/li&gt;;
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>THE PROBLEM</p>
  
  <p>I'm trying to display the results in SearchResult, but it always returns undefined. I tried a settimeout but I know that's the not the solution to my problem. </p>
  
  <p>Why would <code>props</code> return undefined? Even if the data seems to return fine.</p>
  
  <p>I will continue digging for a simple answer and will Edit the question if I find something. </p>
  
  <p>Thanks in advance!</p>
  
  <p>EDIT:</p>
  
  <p>So here is the response I get in the console: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>{
    artists: {
      artists: {
        href: 'sikshdksad',
        items: [array],
        limit: 20,
        ....
      }
    }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>There are 2 artists, because <code>this.state = { artists: [] }</code> if I'm not wrong. </p>