title: How to pass input from React Form to Axios get request and display the request result?
body: <p>I am trying to take input from a user and pass that input into an axios get, when this is done the resultant information is passed into an array that will be displayed as cards.</p>
  
  <p>I am having an issue where the code below is compiling but when enter values into the form fields and press submit, nothing occurrs. Nothing shows up in the web console either.</p>
  
  <p>Where abouts am I going wrong? </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-html lang-html prettyprint-override"><code>const initial_state = {
    location: "",
    cuisine: "",
    searchResults: []
  };
  
  
  class SearchMealForm extends Component {
    constructor(props) {
      super(props);
      this.state = { ...initial_state };
    }
    //handle user input and inject it into yelp api get request
    handleSubmit = event =&gt; {
      event.preventDefault();
      const { location, cuisine, searchResults} = this.state;
      this.props.onFormSubmit(this.state(location, cuisine, searchResults));
      axios.get(`https://api.yelp.com/v3/businesses/search?location=${location}+IE&amp;categories=${cuisine}`)
      .then(response =&gt; this.setState({searchResults}))
    };
  
    handleChange = event =&gt; {
      this.setState({ [event.target.name]: event.target.value });
    };
  
    //YELP http api get request
    searchYelpRestaurants = (location, cuisine, searchResults) =&gt; {
      axios
        .get(
          `https://api.yelp.com/v3/businesses/search?location=${location}+IE&amp;categories=${cuisine}`,
          {
            headers: {
              Authorization: `Bearer ${process.env.REACT_APP_API_KEY_YELP}`
            }
          }
        )
        .then(res =&gt; this.setState({ searchResults: res.data.businesses }));
    };
  
    render() {
      const { location, cuisine } = this.state;
  
      //create cards with the results from the Yelp API GET
      const YelpSearchResults = this.state.searchResults.map(result =&gt; {
        return (
          &lt;div className="ResultCard"&gt;
            &lt;Card style={{ width: "18rem" }}&gt;
              &lt;Card.Img variant="top" src={result.image_url} /&gt;
              &lt;Card.Body&gt;
                &lt;Card.Title&gt;{result.name}&lt;/Card.Title&gt;
              &lt;/Card.Body&gt;
              &lt;ListGroup className="list-group-flush"&gt;
                &lt;ListGroupItem&gt;{result.categories}&lt;/ListGroupItem&gt;
                &lt;ListGroupItem&gt;{result.rating}&lt;/ListGroupItem&gt;
              &lt;/ListGroup&gt;
              &lt;Button variant="primary"&gt;Book restaurant&lt;/Button&gt;
            &lt;/Card&gt;
          &lt;/div&gt;
        );
      });
      // return YelpSearchResults;
      // }
  
      return (
        &lt;React.Fragment&gt;
          &lt;div className="SearchMeal"&gt;
            &lt;Form onSubmit={this.handleSubmit}&gt;
              &lt;Form.Row&gt;
                &lt;Form.Group as={Col}&gt;
                  &lt;Form.Label&gt;City&lt;/Form.Label&gt;
                  &lt;Form.Control
                    name="location"
                    type="text"
                    value={location}
                    onChange={this.handleChange}
                    placeholder="location"
                  /&gt;
                &lt;/Form.Group&gt;
              &lt;/Form.Row&gt;
              &lt;Form.Row&gt;
                &lt;Form.Group as={Col}&gt;
                  &lt;Form.Label&gt;Cuisine&lt;/Form.Label&gt;
                  &lt;Form.Control
                    name="cuisine"
                    type="text"
                    value={cuisine}
                    onChange={this.handleChange}
                    placeholder="cuisine"
                  /&gt;
                &lt;/Form.Group&gt;
              &lt;/Form.Row&gt;
              &lt;Button&gt;Submit&lt;/Button&gt;
              &lt;Button&gt;Clear&lt;/Button&gt;
            &lt;/Form&gt;
          &lt;/div&gt;
  
          {YelpSearchResults}
        &lt;/React.Fragment&gt;
      );
    }
  }
  
  export default SearchMealForm;</code></pre>
  </div>
  </div>
  </p>