Diving into the code

Now that we know our API calls are working, let's switch over to our frontend. Take a peek at client/src/components/search/Search.jsx and its render function:

render() {
 return (
   <h2>Search for: <input type="text" id="searchTerm" />
     <button onClick={this.submitSearch}>Search!</button></h2>
 )
}

It's a simple form so far. Next, let's look at the submitSearch method:

 submitSearch(e) {
 e.preventDefault()

 fetch(`http://localhost:3000/search?q=${document.querySelector('#searchTerm').value}`)
   .then(data => data.json())
   .then((json) => {
     this.props.handleSearchResults(json)
   })
}

Again, we're going to use our proxy to submit our search from the form. After we get our results, we're passing the JSON to the handleSearchResults method from the props that come from the parent component: RecipeBook. We'll take a look at that later, but for now, let's switch back...