Right now in our searchBar.js we have it pushing to /results, and we're basically trying to submit the query in the searchbar. We don't want to do that because we might want to use this site in different ways and different components.

The fix around this is to pass on a prop into the SearchBar that takes a function, so instead of submitting to the function in here, it would submit to the function the file. That might be a little bit confusing.

Open up home.js because this is the one we're going to be wanting to be dealing with. This is the one we want to fix. What we want to do is create a function in here, and what we can actually do is go into our searchBar.js and take it out. So we want to cut this out.

Then go to our home.js and put it in here above our render function. So handleFormSubmit, same thing except we need to modify it. We don't want to take an object with query, we want to just simply take a query.

Now the next thing we need to do is we just need to pass this into our SearchBar and tell it to submit to that function instead of the one that's no longer in SearchBar. So we want to say and onSubmit={}, and this is just a prop we're calling we can name whatever we wanted.

I'm just saying onSubmit because that makes the most sense. Then we want to take a query parameter and then we want to say:

home.js

<SearchBar onSubmit={(query) => this.handleFormSubmit(query)} />

Now we just need to go to our searchBar and fix this up a bit so it can handle that. We want to say in our form, we want to say onSubmit and then we can just say well that should work. What we want to do is actually still have our handleFormSubmit. So I'm going to hit command + z.

We're just going to have handleFormSubmit except for I'm going to get rid of all this code because we have that in our home.js handleSubmit function.

Instead, we just want to say:

searchBar.js

handleFormSubmit = fuction({query}) {
    this.props.onSubmit(query);
}

So pretty simple. What's going on here is we're still doing everything the same, except where instead of pushing the results and performing the search queries in here, we're just saying this.props.onSubmit pass in the query object that we that we're using basically.

What's happening is it's saying this.props.onSubmit and then in our home.js our onSubmit is this function. This is a function right here. Then in this function, it's taking in a query and then it's calling this function.

There are three functions here, and I really want to explain this. We have our handleFormSubmit and then we have our handleFormSubmit in here, and then we have a function in here. So basically, back in our searchBar.js, onSubmit is a function and that function is this function we're passing in this whole entire thing.

This is very much so like writing this: function and then we'd have to type in these braces.

home.js

<SearchBar onSubmit={function(query) { this.handleFormSubmit(query) }}/>

Basically, that's the same thing, but I'm going to use an arrow funtion. You might not have realized that is a function just because of the weird, or nice I guess, ES6 function syntax. The arrow function syntax.

Basically, it's taking in the query parameter, so in our searchBar we're saying onSubmit(query) and then in our home.js it's taking the query and then it's saying get this.handleFormSubmit and then that's taking the query where we pass it here. The query is getting passed along.

It's going into a lot of functions. We're saying the handleFormSubmit is taking the object with query in it, then our onSubmit is taking query and passing that into this.handleFormSubmit, which is then logging it and pushing us to results. That's the fix around that.

Now we just need to provide that results.js page the same kind of thing. So I'm going to go into our results.js instead of copying it. I'm just going to say:

results.js

handleSearchbarSubmit(query) {

}

Then just pass in the query and then do our stuff in there. Then I'm going to to home.js to modify our syntax to follow that. So I'll say:

home.js

handleSearchbarSubmit(query) {
   console.log('trying to handle submit for query', query);
   this.props.history.push('/results');
}

I'm going to change this right here.

home.js

<SearchBar onSubmit={(query) => this.handleSearchbarSubmit(query)} />

Now we want to name it handleFormSubmit in our searchBar.js just because we know this is a form and we don't want to change that. In results.js and home.js, we want to say Searchbar because we're using a component called Searchbar. It's a lot less confusing. It makes sense.

Now, in the results.js we need to add in this functionality. So when we type in here, when you hit return, then we need to have it fetch our post. One thing you'll notice is that says it's not a function. That's because, in our SearchBar, we didn't provide a function.

Let's just quickly provide a function here, let's say:

results.js

<SearchBar onSubmit={(query) => this.handleSearchbarSubmit(query)} />

Let's save that and go back to the browser here. Re-load it and let's see if that's working. It's working. It's not displaying anything because we don't have anything in here. If we were to console.log(query)it here, it would work. You'll see that it's printing out at the bottom now.

Basically all we need to do now is a couple things. In our Searchbar here, we want to have that search for our posts. We also need it to search for the same posts in our home.js. So what we'll do the next guide is we'll perform the search on the results first.

We'll figure out this one first and then we'll go back to the home component and perform the search on here. So right now, we're going to leave this to not be functional, but then the Searchbar here we'll make it function.

Let's go ahead and make it so when we search we can actually get back a set of posts and display it our results post component which we will build after that. So let's do that. Let's commit our code. I'm going to say git status, git add ., and then let's say get commit -m "modified SearchBar Component to take onSubmit function via props".

Now what we've done is we've made it so we can use the searchbar pretty much anywhere. Now in this particular app, it's can at the same exact functionality. It's just going to query for the results that we type in here.

If we wanted to build out another feature in the future that didn't perform the exact same functionality, just searching for posts. We don't use the searchbar to search something else like just some topics or something, we would want to have it so we don't have to rebuild something.

We want something quick and easy we can just pass in this and then have the functionality we want in this function. It makes it scalable, and that's really nice. Let's go ahead and hop into the next guide where we will add that functionality. See you then.

Resources

• Source Code