title: Search functionality and fetch api in React
body: <p>I'm working on an app that makes a call to Unsplash's API and displays the response. I was able to get/display the response easily with just the <code>/photos</code> endpoint when I had the fetch request in the <code>componentDidMount()</code>, but I want to make the app searchable, so I added <code>performSearch()</code> with a default query.</p>
  
  <p>But adding <code>performSearch</code> caused this error:
  <a href="https://i.stack.imgur.com/EnbOw.png" rel="nofollow noreferrer">TypeError: cannot read property 'map' of undefined</a></p>
  
  <p>This is the JSON I'm getting back when I test:
  <a href="https://i.stack.imgur.com/MZUbh.jpg" rel="nofollow noreferrer">Search endpoint + query</a></p>
  
  <p>I've tried other solutions I've found on the forums, but so far nothing's fixed the problem. I'm definitely getting back an array, so shouldn't <code>map</code> work?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>class App extends Component {
  
    constructor() {
      super();
      this.state = {
        results: [],
        loading: true
      };
    }
  
    componentDidMount() {
      this.performSearch();
    }
  
    performSearch = (query = 'camping') =&gt; {
      fetch(`https://api.unsplash.com/search/photos?page=3&amp;query=${query}&amp;client_id=${client_id}`)
        .then(response =&gt; response.json())
        .then(responseData =&gt; {
          this.setState({
            results: responseData.data,
            loading: false
          });
        })
        .catch(error =&gt; {
          console.log('Error fetching and parsing data', error);
        });
    }
  
    render() {
  
      return ( 
        &lt;div className = "App"&gt;
          &lt;SearchPhotos onSearch = {this.performSearch} /&gt; 
          &lt;div&gt; 
            {
              (this.state.loading) ? &lt;p&gt;Loading&lt;/p&gt; :&lt;PhotoList results={this.state.results} /&gt;
            } 
          &lt;/div&gt; 
        &lt;/div&gt;
      );
    }
  }
  
  export default App;</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><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>import React from 'react';
  
  const PhotoList = props =&gt;
  
      &lt;ul&gt;
          {props.results.map((result, index) =&gt;
              &lt;li key={index}&gt;
                  &lt;img src={result.urls.small} key={result.id} /&gt;
              &lt;/li&gt;
          )}
      &lt;/ul&gt;;
  
  export default PhotoList;</code></pre>
  </div>
  </div>
  </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>import React, { Component } from 'react';
  
  
  class SearchPhotos extends Component {
  
      state = {
          searchText: ''
      }
  
      onSearchChange = e =&gt; {
          this.setState({
              searchText: e.target.value
          });
      }
  
      handleSubmit = e =&gt; {
          e.preventDefault();
          this.props.onSearch(this.query.value);
          e.currentTarget.reset();
      }
  
      render() {
          return(
              &lt;form className="search-form" onSubmit={this.handleSubmit}&gt;
                  &lt;input type="search"
                      onChange={this.onSearchChange}
                      name="search"
                      ref={(input) =&gt; this.query = input}
                      placeholder="Search..." /&gt;
                  &lt;button className="search-button" type="submit" id="submit"&gt;Go!&lt;/button&gt;
              &lt;/form&gt;
          );
      }
  }
  
  export default SearchPhotos;</code></pre>
  </div>
  </div>
  </p>