Check out a free preview of the full Complete Introduction to React (feat. Redux and React Router) course:
The "Searching from the Landing Page" Lesson is part of the full, Complete Introduction to React (feat. Redux and React Router) course featured in this preview video. Here's what you'd learn in this lesson:

Brian implements the search functionality for the Landing component. He adds an onChange event to the input to update the store. Brian also wraps the input field in a form so the onSubmit event can take the user to the search results page.

Get Unlimited Access Now

Transcript from the "Searching from the Landing Page" Lesson

[00:00:00]
>> [MUSIC]

[00:00:03]
>> Brian Holt: Okay. Landing.JSX. So now we want to make this input also search as well.
>> Brian Holt: So this can no longer be a status functional component unfortunately, cuz we have to be able to have methods on it. So you can do a create class, you can do Let's do an E6S class, so I can show you what the binding looks like, yeah.

[00:00:48]
>> Brian Holt: By the way, you would not typically mix and match like this. You'd usually pick one and stick to it, but I want to get a flavor for both. And you can make your own decisions of what you like and what you don't. But I'm gonna show you the really annoying part of the ES61, and why most people like not to use them.

[00:01:21]
>> Brian Holt: Okay, so I just converted this to an es6 class. Not much going there.
>> Brian Holt: Okay now we need to plug in this input to be able to accept events right because right now stuff happening is just not listening. So we need to first let's do the connector down here.

[00:01:48] Connector(Landing) then we also need to go imported up here so, const { connector } = require(./Store). Okay, so now we're plugged into redux.
>> Brian Holt: So, let's actually start using this down here. So inputs can be value={this.props.searchTerm} right, because we're getting that from redux. And onChange, this is going to be {this.handleSearchTermEvent}.

[00:02:39]
>> Brian Holt: Okay. Now we need to have a handle search term event function, right. So we're going to say, handleSearchTermEvent. Again, this is an ES6 class. No commas here
>> Brian Holt: And this takes an event by the way, (event). This.props.setSearch term. Bless you. (Event.target.value).
>> Brian Holt: Bless you.
>> Brian Holt: Okay. So, this would be enough in react create class in terms of, yeah, that's also we need to do next.

[00:03:42] In terms of setting up this handleSearchTermEvent. However, there's a problem with ES6 classes, it doesn't do what's called autobinding for you. So this right here is actually going to be incorrect. This is going to refer to Window and it's not actually going to refer to our React.Component and that's a problem because we're trying to call the set search term off of property.

[00:04:07] So this is gonna error unless we fix it. And again, this is just automatically fixed for you in reactor create class. It's not fixed for you in ES6 components. So You have to do this kinda messiness that you're gonna do a constructor right here. That's gonna take him props.

[00:04:27] And the first thing you do with there is you have to put super(props) right? And the reason for being for that is this right here has to be pass up to here to React.Component. You have to be explicitly doing that. React also doesn't do that for you. So it's just boilerplate that you just have to do every single time, you have to remember.

[00:04:46] If you don't do it, react will yell at you, and say, you need to pass up props and that's what it's talking about. Okay. So now I have to say this.handleSearchTermEvent = this.handleSearchTermEvent.bind this. For every method that I create in this ES6 component, I have to have a line in my constructor like this.

[00:05:08]
>> Brian Holt: Does anyone find that just incessantly annoying?
>> Students: [LAUGH]
>> Brian Holt: I do.
>> Brian Holt: But that's why I'm going to say most people elect, not to use these, it's for this reason.
>> Brian Holt: Make sense? Okay. So, awesome handleSearchTermEvent now updates our state. But we have no way to submit this to be able to actually go to the search page, right.

[00:05:37] Because you don't actually want to just instantly go to the search page. You could that's actually kind of an interesting idea, right. Since someone starts typing into the Search bar that actually just pops up to the top. Haven't thought of that, you could do that. We're not going to though.

[00:05:51] [LAUGH]
>> Students: [LAUGH]
>> Brian Holt: I want to make it so when you hit Enter, you go to the Search page, right. So let's see how you do that. The easiest way to do that and the most I would say built for the Internet way is just to use a form, right.

[00:06:05] So we're gonna say form. And onSubmit = {this.gotoSearch}.
>> Brian Holt: All right, just using an old school HTML form.
>> Brian Holt: Nice thing about onSubmit, is anything that would fire off a submit events, if they hit Enter or if they hit a Submit button, all the stuff would normally work in HTML form works here.

[00:06:41] So that's why I recommend. As I like to call it drawing within the lines.
>> Brian Holt: So, now make a new method called gotoSearch.
>> Brian Holt: This is gonna, also gonna take an event.
>> Brian Holt: And as you remember up here you have to do this thing for everything gotoSearch = this.gottoSearched.bin (this).

[00:07:08] Like I said it gets old real fast especially when you know if you do the other syntax it's just free.
>> Brian Holt: And the other thing is we have to go grab hash history because we have to use that. Right? Right. Also to, no it's not there. Why didn't I put them in my notes?

[00:07:28] Good job Brian. Okay, so up here I want to say const {hashHistory} = require
>> Brian Holt: Yeah, that's the way I did, require('react-router'), right? Cuz we're gonna be able to manipulate our history here, which is what we wanna do.
>> Brian Holt: And we're gonna say, hashHistory.push('search').
>> Brian Holt: The other thing we need to do here, like this is literally going to be a form submit and if you don't prevent default into the form submit, it's actually gonna try and really submit an HTML form to itself so you have to do event.preventDefault.

[00:08:22] This is going to actually prevent it from trying to move to another page, as HTML forms are bound to do.
>> Brian Holt: Questions? This should work now, I believe.
>> Speaker 3: So you're navigating to search in the state since it's not connected to a view model. It's going to stay from page to page?

[00:08:56]
>> Brian Holt: Say that one more time.
>> Speaker 3: So you're not actually passing the state of the value of the field.
>> Brian Holt: Nope.
>> Speaker 3: In Go to Search.
>> Brian Holt: Right because it's coming, it's going to stay in redux right. Redux is going to maintain its state across pages. Yeah. So let's go check for works.

[00:09:17] First let's make sure I have any errors I do. So prop types, let's to do that too. And I have to do go down here to do prop types so Landing.propTypes lowercase = object and it's going to grab those as well. Const func and string. I need func and I need string =React.PropTypes capitalized.

[00:09:50] And I'm gonna do searchTerm: string, and setSearchTerm: func, okay. Now if I save that, just this part down here.
>> Brian Holt: Okay, now I'm not getting any errors anymore so I should be okay. Let's go back over here. Let's go to some refresh, go to the landing. Let's type, I don't know like dare over here or something like that and hit Enter.

[00:10:29] And now I've searched from the landing page.
>> Speaker 4: Can you go over what's happening with hashHistory.push?
>> Brian Holt: Sure. Momentarily, I think I want to point out did we never make that work? Did I just missed that? I did, okay, I must have missed the whole section here. It supposed to be like click on Daredevil to go to the details page and I guess we never just made that work.

[00:11:02] So let's finish questions and then we'll just go to that. Cuz that's not really an interesting thing to do. It's just to do, anyway.
>> Speaker 4: Yeah. I'm just gonna follow up to that hash history. The web ask key is, search the URL path that we're adding to an array of all previous paths.

[00:11:20]
>> Brian Holt: Yes, that's not the ideas it's a stack of your history, right. So you keep pushing, it's, that's also the name of the terminology for the HTML5 history API this say like, .push that takes you to a new place. So, [COUGH] in this particular case you can just think of it as like redirect, redirect me to the search page, right?

[00:11:41] Same idea. Yeah. I think it's the extent of the story. It's just redirect me to the search page is all.
>> Speaker 4: I mean, did you say that this is not a normal form element?
>> Brian Holt: It is, yeah. I mean if you like inspect element and, inspect. See? It's normal form right there.

[00:12:19]
>> Brian Holt: That works just like a normal form.