title: onSubmit is not executing async function
body: <p>I'm trying to submit a function that will generate a gif, when pressing the get gif button. </p>
  
  <p>However, it does not show anything in the console, and the page reloads.</p>
  
  <p>1) I want the client to type in a value</p>
  
  <p>2) set the value to the like so</p>
  
  <p>ex.</p>
  
  <p><code>http://api.giphy.com/v1/gifs/search?q=USER_VALUE&amp;api_key=iBXhsCDYcnktw8n3WSJvIUQCXRqVv8AP&amp;limit=5</code></p>
  
  <p>3) fetch the value and return like the following </p>
  
  <p><a href="https://i.stack.imgur.com/ItdIh.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ItdIh.png" alt="enter image description here"></a></p>
  
  <p>Current project</p>
  
  <p><a href="https://stackblitz.com/edit/react-4mzteg?file=index.js" rel="nofollow noreferrer">https://stackblitz.com/edit/react-4mzteg?file=index.js</a></p>
  
  <p><strong>App.js</strong></p>
  
  <pre><code>import React, { Component } from 'react';
  import logo from './logo.svg';
  import './App.css';
  import Card from './Card';
  import { throws } from 'assert';
  
  class App extends Component {
  
    constructor(props){
      super(props);
  
      this.state = {
        query: '',
        slug:undefined,
        url:undefined
      }
  
      this.onChange = this.onChange.bind(this);
  
    }
  
    onChange(e){
      this.setState({
        query: e.target.query
      })
    }
  
  
  
    getGIY = async (e) =&gt;{
  
      try {
        const {slug, url} = this.state;
        const query = this.state._query 
        const response = await fetch(`http://api.giphy.com/v1/gifs/search?q=${query}&amp;api_key=iBXhsCDYcnktw8n3WSJvIUQCXRqVv8AP&amp;limit=5`);
        const data = await response.json();
        const mainData = data.data;
        if(query){
          this.setState({
            slug: mainData[0].title,
            url: mainData[0].images.downsized.url
          });
  
          console.log(mainData);
        }
  
      } catch (error) {
        console.log(error);
      }
  
  
  
    }
  
  
    render() {
      return(
        &lt;div&gt;
          &lt;h1&gt; Welcome&lt;/h1&gt;
  
          &lt;form onSubmit={this.props.getGIY}&gt;
                          &lt;input type="text" name="query" onChange={this.onChange} ref={(input) =&gt; {this.state._query = input}} placeholder="Search GIF..."/&gt;
                          &lt;button&gt;Get GIF&lt;/button&gt;
  
                  &lt;/form&gt;
  
          &lt;Card slug={this.state.slug} url={this.state.url}/&gt;
        &lt;/div&gt;
      );
  
    }
  
  }
  
  export default App;
  </code></pre>
  
  <p><strong>Card.js</strong></p>
  
  <pre><code>import React, {Component} from 'react';
  
  const Styles = {
      width: '300px',
      height: '300px'
  }
  
  class Card extends React.Component {
  
      render() {
  
          return (
  
              &lt;div&gt;
                  &lt;h1&gt;{this.props.slug}&lt;/h1&gt;
  
                  &lt;div&gt;
                      &lt;img src={this.props.url}/&gt;
                  &lt;/div&gt;
  
              &lt;/div&gt;
  
          );
  
      }
  
  }
  
  export default Card;
  </code></pre>