title: React setState working then getting undefined
body: <p>New to React, creating an app for a Codecademy project which calls Spotify Web API. </p>
  
  <p>The API call is working: I'm getting an access token and expiry timer, then getting song results returned in an array. I am then using <code>setState</code> in App.js so that <code>searchResults</code> = the array returned by Spotify. I am then passing <code>searchResults</code> from <code>state</code> through <code>props</code> to child components.</p>
  
  <p>App.js (state) -> Search-container.js -> Search-view.js -> SearchResults-container.js -> SearchResults-view.js -> Track-container.js</p>
  
  <p>I can see the <code>state</code> is getting successfully passed by the <code>props</code> because I am logging <code>this.props.searchResults</code> to the console in Track-container.js and seeing the results array. </p>
  
  <p>However, on the next line in the console it is becoming <code>undefined</code>.</p>
  
  <p>Screenshot of console: <a href="https://i.imgur.com/XkMEb4o.png" rel="nofollow noreferrer">https://i.imgur.com/XkMEb4o.png</a></p>
  
  <p>Console:</p>
  
  <pre><code>Did update
  Track-container.js:19 [{…}]
  Track-container.js:18 Did update
  Track-container.js:19 undefined
  Track-container.js:18 Did update
  Track-container.js:19 [{…}]
  Track-container.js:18 Did update
  Track-container.js:19 undefined
  Track-container.js:18 Did update
  Track-container.js:19 [{…}]
  Track-container.js:18 Did update
  Track-container.js:19 undefined
  Track-container.js:18 Did update
  Track-container.js:19 [{…}]
  Track-container.js:18 Did update
  Track-container.js:19 undefined
  Spotify.js:44 BQBLcVOKRR7i2MjOoNu9lp4He2oOJ1FN8e90Cbben-naezHF3DP7ZWgTlCcDvIBXsa5KXQndALtkoxBtY3RYR8BhTfVnZ5QdlE-vMVQ_mgnlHqT4M_6TpLYVEisn9kw_9slvh_nPhyRIGvg7gA
  Spotify.js:45 3600
  Track-container.js:18 Did update
  Track-container.js:19 (20) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
  Track-container.js:18 Did update
  Track-container.js:19 undefined
  </code></pre>
  
  <p>The componentDidUpdate() method in Track-container.js is logging to the console every time I type in the search field (which has an onChange handler). Not sure if this is expected behavior in React?</p>
  
  <p>My code:</p>
  
  <p><strong>Spotify.js:</strong></p>
  
  <pre><code>export class Spotify extends React.Component {
    constructor(props) {
      super(props);
    }
  
    getAccessToken() {
      if (userAccessToken) { // If access token already defined
        return userAccessToken;
  
      } else if (window.location.href.match(userAccessTokenRegex) != null) { // If access token is not yet defined but there is an access token in the URL
  
          // Set access token from URL hash fragment
          userAccessToken = window.location.href.match(userAccessTokenRegex)[1];
          // Set expiry timer from URL hash fragment
          expiresIn = window.location.href.match(expiresInRegex)[1];
          // Wipe the access token after expiry timer runs out
          window.setTimeout(() =&gt; userAccessToken = '', expiresIn * 1000);
          // Clear the parameters from the URL
          window.history.pushState('Access Token', null, '/');
  
      } else {
          window.location = authUrl; // Redirect to Spotify auth
      }
    }
  
    async search(term) {
      if (userAccessToken === undefined) {
        this.getAccessToken();
        console.log(userAccessToken);
        console.log(expiresIn);
      }
  
      try {
        const response = await fetch('https://api.spotify.com/v1/search?type=track&amp;q=' + term, {
          method: 'GET',
          headers: {'Authorization': `Bearer ${userAccessToken}`}
        })
        if (response.ok) {
          let jsonResponse = await response.json();
          let tracks = jsonResponse.tracks.items.map(track =&gt; ({
                  id: track.id,
                  name: track.name,
                  artist: track.artists[0].name,
                  album: track.album.name,
                  uri: track.uri
              }));
          return tracks;
        }
      }
      catch(error) {
        console.log(error);
      }
    }
  
  };
  </code></pre>
  
  <p><strong>App.js:</strong></p>
  
  <pre><code>class App extends React.Component {
    constructor(props) {
      super(props);
  
      this.state = {
        'term': '',
        "searchResults": [
          {}
        ]
      }
  
      // Create Spotify
      this.Spotify = new Spotify();
  
      // Bind this
      this.handleChange = this.handleChange.bind(this);
      this.search = this.search.bind(this);
      this.onSearch = this.onSearch.bind(this);
    }
  
    // onChange handler for child input
    handleChange(e) {
      const term = e.target.value; // Take value from child component input field
      this.setState({ // Update state with value
        term: term
      });
    }
  
    // onSubmit handler for SearchBar input
    onSearch(e) {
      e.preventDefault();
      this.search(this.state.term);
    }
  
    // Search method
    async search(term) {
      const results = await this.Spotify.search(term);
      this.setState({
        searchResults: results
      });
    }
  
    render() {
      return (
        &lt;div className="columns is-marginless"&gt;
          &lt;main className="column is-two-thirds has-padding-40"&gt;
            &lt;header&gt;
              &lt;h1 className="title"&gt;Jammming&lt;/h1&gt;
              &lt;h2 className="subtitle"&gt;Create Spotify playlists.&lt;/h2&gt;
            &lt;/header&gt;
            &lt;Search searchResults={this.state.searchResults} onChange={this.handleChange} onSearch={this.onSearch} value={this.state.term} /&gt;
          &lt;/main&gt;
  
          &lt;aside className="column is-one-third is-paddingless"&gt;
            &lt;Playlist /&gt;
          &lt;/aside&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p><em>[...4 components in the middle each passing state down via props...]</em></p>
  
  <p><strong>Track-container.js:</strong></p>
  
  <pre><code>export class Track extends React.Component {
      constructor(props) {
          super(props);
      }
  
      componentDidUpdate() {
          console.log('Did update');
          console.log(this.props.searchResults);
      }
  
      render() {
          return (
              &lt;div className="TrackList"&gt;
  
              &lt;/div&gt;
          );
      }
  }
  </code></pre>
  
  <p>Ultimately in Track-container.js I want to map the array to output a <code>&lt;TrackView /&gt;</code> component for each item in the array, but I can't do that yet because the array is <code>undefined</code>.</p>
  
  <p><em>Edit:</em></p>
  
  <p>Adding the code for the search components in case the error is there.</p>
  
  <p><strong>Search-container.js:</strong></p>
  
  <pre><code>import React from 'react';
  // Import child components
  import { SearchView } from './Search-view';
  
  export class Search extends React.Component {
    constructor(props) {
      super(props);
    }
  
    render() {
      return (
        &lt;SearchView searchResults={this.props.searchResults} onChange={this.props.onChange} onSearch={this.props.onSearch} value={this.props.value} /&gt;
      );
    }
  }
  </code></pre>
  
  <p><strong>Search-view.js:</strong></p>
  
  <pre><code>import React from 'react';
  // Import child components
  import { SearchBar } from './SearchBar';
  import { SearchResults } from './SearchResults';
  
  export const SearchView = (props) =&gt; {
    return (
      &lt;section className="Search"&gt;
        &lt;SearchBar onChange={props.onChange} onSearch={props.onSearch} value={props.value} /&gt;
        &lt;SearchResults searchResults={props.searchResults} /&gt;
      &lt;/section&gt;
    );
  }
  </code></pre>
  
  <p><strong>SearchBar-container.js:</strong></p>
  
  <pre><code>import React from 'react';
  import { SearchBarView } from './SearchBar-view';
  import Spotify from '../../../../utils/Spotify';
  
  export class SearchBar extends React.Component {
    constructor(props) {
      super(props);
    }
  
    render() {
      return (
        &lt;div&gt;
        &lt;SearchBarView onChange={this.props.onChange} onSearch={this.props.onSearch} value={this.props.value} /&gt;
        &lt;h2&gt;{this.props.value}&lt;/h2&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p><strong>SearchBar-view.js:</strong></p>
  
  <pre><code>import React from 'react';
  import './SearchBar.scss'; // Import styles
  import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
  import { faSearch } from '@fortawesome/pro-regular-svg-icons';
  
  export const SearchBarView = (props) =&gt; {
      return (
        &lt;form className="SearchBar columns is-variable is-2" onSubmit={props.onSearch}&gt;
          &lt;div className="column"&gt;
            &lt;p className="control has-icons-left"&gt;
              &lt;input className="input is-large" placeholder="Enter a song, album, or artist" onChange={props.onChange} value={props.value} /&gt;
              &lt;span className="icon is-small is-left"&gt;
                &lt;FontAwesomeIcon icon={faSearch} /&gt;
              &lt;/span&gt;
            &lt;/p&gt;
          &lt;/div&gt;
          &lt;div className="column is-narrow"&gt;
            &lt;button className="SearchButton button is-large is-primary"&gt;Search&lt;/button&gt;
          &lt;/div&gt;
        &lt;/form&gt;
      );
  }
  </code></pre>
  
  <p><strong>SearchResults-container.js:</strong></p>
  
  <pre><code>import React from 'react';
  // Import components
  import { SearchResultsView } from './SearchResults-view';
  
  export class SearchResults extends React.Component {
    constructor(props) {
      super(props);
    }
  
    render() {
      return (
        &lt;SearchResultsView searchResults={this.props.searchResults} /&gt;
      );
    }
  }
  </code></pre>
  
  <p><strong>SearchResults-view.js:</strong></p>
  
  <pre><code>import React from 'react';
  // Import components
  import { Track } from '../../Track';
  
  export const SearchResultsView = (props) =&gt; {
    return (
      &lt;&gt;
        &lt;Track searchResults={props.searchResults} /&gt;
      &lt;/&gt;
    );
  }
  
  </code></pre>
  
  <p>GitHub repo: <a href="https://github.com/edxv/jammming" rel="nofollow noreferrer">https://github.com/edxv/jammming</a></p>