title: fetch URL from JSON and display data
body: <p>I have an web app where you can search for repositories by name. It displays some of the info but I want to display the readme file if the repo has one. I know I need to fetch it separately but I'm not 100% sure how to do that. How do I fetch it and display it as another list object.</p>
  
  <p>This is the working code without readme.</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>let searchTerm;
  
  class SearchBox extends React.Component {
  
  
    constructor(props) {
      super(props);
      this.onClick = this.onClick.bind(this);
      this.state = {
        repositories: [],
        showInfo: false
      };
  
    }
  
  
    render() {
      const moreDetail = (item) =&gt; (!this.state.showInfo ? &lt; span / &gt; :
        &lt;
        div className = "info" &gt;
        &lt;
        li &gt;
        &lt;
        p &gt; Open issue count: {
          item.open_issues_count
        } &lt; /p&gt; &lt;
        /li&gt; &lt;
        li &gt;
        &lt;
        p &gt; Number of forks: {
          item.forks
        } &lt; /p&gt; &lt;
        /li&gt; &lt;
        li &gt;
        &lt;
        p &gt; Language: {
          item.language
        } &lt; /p&gt; &lt;
        /li&gt; &lt;
        /div&gt;
      );
  
      return ( &lt;
        div &gt;
        &lt;
        form &gt;
        &lt;
        input type = "text"
        className = "searchbox"
        ref = {
          (input) =&gt; {
            this.searchBox = input;
          }
        }
        /&gt; &lt;
        button onClick = {
          this.onClick
        } &gt; Search &lt; /button&gt; &lt;
        /form&gt; &lt;
        div className = "results" &gt;
        &lt;
        h2 &gt; Repositories &lt; /h2&gt; &lt;
        button onClick = {
          this._handleClick.bind(this)
        } &gt; Detailed view &lt; /button&gt; &lt;
        /div&gt; &lt;
        ul &gt; {
          this.state.repositories.map((item, index) =&gt; ( &lt;
            div className = "repository"
            key = {
              index
            } &gt;
            &lt;
            a href = {
              item.html_url
            } &gt; &lt; li className = "repoName" &gt; {
              item.name
            }
  
            &lt;
            /li&gt; &lt;
            /a&gt; {
              moreDetail(item)
            }
  
  
            &lt;
            /div&gt;
          ))
        } &lt;
        /ul&gt;
  
        &lt;
        /div&gt;
      );
    }
  
    _handleClick() {
      this.setState({
        showInfo: !this.state.showInfo
      });
    }
  
  
    onClick(event) {
  
      searchTerm = this.searchBox.value;
      let endpoint = 'https://api.github.com/search/repositories?sort=stars&amp;order=desc&amp;q=' + searchTerm;
  
      console.log(searchTerm);
      fetch(endpoint)
        .then(blob =&gt; blob.json())
        .then(response =&gt; {
          this.setState({
            repositories: response.items
          });
        });
      event.preventDefault();
  
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I am making a webapp using Github search API. When searching for a repository it should display the repository and info about that including the readme file.
  so far it does all that apart from displaying the readme file.</p>