title: FETCH helper function returns undefined when calling setState()
body: <p>I have a helper function that uses FETCH to pull data from an API. I'm trying to set the response of the fetch request to my state using setState() but it keeps returning undefined. Here is my helper function: (I realize I'm exposing my keys on the front end but I will adjust if I ever deploy to production)</p>
  
  <pre><code>const authCode = {
      async getAuthCode() {
          const authCodeMatch = window.location.href.match(/code=([^&amp;]*)/)[1];
          await fetch(`https://id.twitch.tv/oauth2/token?client_id=${TWITCH_ID}&amp;client_secret=${TWITCH_SECRET}&amp;code=${authCodeMatch}&amp;grant_type=authorization_code&amp;redirect_uri=${TWITCH_CB}`, {
              method: 'POST',
              mode: 'cors',
              'Access-Control-Allow-Origin':'*',
              credentials: 'same-origin', 
              headers: {
               'Content-Type': 'application/json'
              }
          })
          .then(response =&gt; 
              response.json()    
          )
          .then(data =&gt; {
              console.log(data.access_token);
              fetch(`https://api.twitch.tv/helix/users?id=43691`, {
                  method: 'GET',
                  mode: 'cors',
                  'Access-Control-Allow-Origin':'*',
                  credentials: 'same-origin',
                  headers: {
                      'Content-Type': 'application/json',
                      'Client-ID': TWITCH_ID,
                      'Authorization': 'Bearer ' + data.access_token
                  }
              })
              .then(response =&gt; response.json())
              .then(newdata =&gt; {
                  console.log(newdata);
                  if (!newdata.data) {
                      return [];
                  }
                  //console.log(newdata.data[0].view_count);
                  return newdata.data.map(views =&gt; ({
                      view_count: views.view_count
                  }))
              })
          })
      }
  </code></pre>
  
  <p>Everything logs to the console fine so I'm pretty sure I'm mapping through the correct array to parse the data. In any case, here is the returned object in console as well as my component code. In my profile component it just pushes undefined to my state:</p>
  
  <pre><code>// Console response
  data: Array(1)
  0:
  broadcaster_type: "partner"
  description: ""
  display_name: "Faker"
  id: "43691"
  login: "faker"
  offline_image_url: "https://static-cdn.jtvnw.net/jtv_user_pictures/7d76e34d-3ee3-42c0-a46b-e320d37fcde6-channel_offline_image-1920x1080.jpeg"
  profile_image_url: "https://static-cdn.jtvnw.net/jtv_user_pictures/b2eb8a23-d6ad-45aa-bd8e-062133b64452-profile_image-300x300.png"
  type: ""
  view_count: 81769581
  __proto__: Object
  length: 1
  __proto__: Array(0)
  </code></pre>
  
  <p>Component</p>
  
  <pre><code>export default class Profile extends Component {
  
      constructor(props) {
          super(props);
  
          this.state = {
              viewData: []
          }
  
          this.handleNewPost = this.handleNewPost.bind(this);
  
      }
  
      handleNewPost () {
          authCode.getAuthCode().then(viewcountResults =&gt; {
              this.setState({viewData: viewcountResults})
          })
      }
  
      render() {
          return (
              &lt;div&gt;
                  &lt;Container&gt;
                  &lt;div className='mt-5'&gt;
                  &lt;Button color='success' size='lg' onClick={this.handleNewPost}&gt;
                      Post Data
                  &lt;/Button&gt;
                  &lt;/div&gt;
                  &lt;div&gt;
                  {this.state.viewData.view_count}
                  &lt;/div&gt;
                  &lt;/Container&gt;
              &lt;/div&gt;
          )
      }
  </code></pre>
  
  <p>Thanks for any help!</p>