title: Chaining Fetch Calls React.js
body: <p>I'm making an application where I have to grab certain data from the Github API. I need to grab the name, url, language and latest tag. Because the latest tag is in a separate url, I need to make another fetch call there to grab that data.</p>
  
  <p>I'm running into a certain amount of errors.</p>
  
  <p>1st being the <code>typeError cannot read property 'name' of undefined</code>. I'm sure this is from the fetch call to the tag url where there isn't any data. I'm not really sure how to check if it's undefined. I've tried calling checking to see if the <code>typeof</code> data is undefined and so on but still get the error.</p>
  
  <p>2nd problem being my tag url data doesn't show up with the other data. I'm sure I'm chaining the data wrong because when I click the add button it shows up.</p>
  
  <p>Here is my code:</p>
  
  <pre><code>import React, { Component } from 'react'
  import './App.css'
  
  class App extends Component {
    state = {
      searchTerm: '',
      repos: [],
      favourites: []
    }
  
    handleChange = e =&gt; {
      const { searchTerm } = this.state
  
      this.setState({ searchTerm: e.target.value })
  
      if (searchTerm.split('').length - 1 === 0) {
        this.setState({ repos: [] })
      }
    }
  
    findRepos = () =&gt; {
      const { searchTerm } = this.state
  
      // First api call here
      fetch(`https://api.github.com/search/repositories?q=${searchTerm}&amp;per_page=10&amp;access_token=${process.env.REACT_APP_TOKEN}
  `)
        .then(res =&gt; res.json())
        .then(data =&gt; {
          const repos = data.items.map(item =&gt; {
            const { id, full_name, html_url, language } = item
            const obj = {
              id,
              full_name,
              html_url, 
              language,
              isFavourite: false
            }
  
            // Second api call here. I need the data from map to get the tags for the correct repo
            fetch(`https://api.github.com/repos/${full_name}/tags`)
              .then(res =&gt; res.json())
              .then(data =&gt; {
                obj.latest_tag = data[0].name
              })
              .catch(err =&gt; console.log(err))
  
            return obj
          })
  
          this.setState({ repos })
        })
        .catch(err =&gt; console.log(err))
    }
  
  render() {
    const { searchTerm, repos, favourites } = this.state
  
    return (
      &lt;div className="App"&gt;
        &lt;h1&gt;My Github Favorites&lt;/h1&gt;
        &lt;input 
          type="text"
          placeholder="search for a repo..."
          value={searchTerm}
          onChange={e =&gt; this.handleChange(e)}
          onKeyPress={e =&gt; e.key === 'Enter' &amp;&amp; this.findRepos()}
        /&gt;
        &lt;button 
          type="submit" 
          onClick={this.findRepos}&gt;
          Search
        &lt;/button&gt;
  
       &lt;div className="category-container"&gt;
        &lt;div className="labels"&gt;
          &lt;h5&gt;Name&lt;/h5&gt;
          &lt;h5&gt;Language&lt;/h5&gt;
          &lt;h5&gt;Latest Tag&lt;/h5&gt;          
        &lt;/div&gt;
  
        // Here I list the data
        {repos.map(repo =&gt; (
          &lt;div key={repo.id}&gt;
            &lt;a href={repo.html_url}&gt;{repo.full_name}&lt;/a&gt;
            &lt;p&gt;{repo.language}&lt;/p&gt;
            {repo.latest_tag ? &lt;p&gt;{repo.latest_tag}&lt;/p&gt; : &lt;p&gt;-&lt;/p&gt;}
            &lt;button onClick={() =&gt; this.addToFavs(repo)}&gt;Add&lt;/button&gt;
          &lt;/div&gt;
        ))}   
  
        &lt;h1&gt;Favourites&lt;/h1&gt;
        {favourites.map(repo =&gt; (
          &lt;div key={repo.id}&gt;
            &lt;a href={repo.html_url}&gt;{repo.full_name}&lt;/a&gt;
            &lt;p&gt;{repo.language}&lt;/p&gt;
            &lt;p&gt;{repo.latest_tag}&lt;/p&gt;
            &lt;button&gt;Remove&lt;/button&gt;
          &lt;/div&gt;
        ))}   
      &lt;/div&gt;
    &lt;/div&gt;
    )
  }
  }
  
  export default App
  </code></pre>