This course has been updated! We now recommend you take the Complete Intro to React, v7 course.

Check out a free preview of the full Complete Intro to React, v2 (feat. Router v4 and Redux) course:
The "Search Submit Event" Lesson is part of the full, Complete Intro to React, v2 (feat. Router v4 and Redux) course featured in this preview video. Here's what you'd learn in this lesson:

The search input field in the Landing Component is still not navigating to the search page. To fix this, Brian wraps the input in a Form component so he can utilize the onSubmit event. The code for the application up to this point is on the v2-19 branch.

Get Unlimited Access Now

Transcript from the "Search Submit Event" Lesson

>> Brian Holt: It's still not super useful because we can change this input. Congratulations, we're now writing to Redux but it's not really doing anything. One thing we want to be able to do is we want to be able send ourselves to the search page using our little input right here.

[00:00:14] So there's a couple ways to do this. I've found the easiest way is just to wrap this in a form real quick.
>> Brian Holt: And then we can just key off of the onSubmit.
>> Brian Holt: So you would just say this.handleSearchSubmit.
>> Brian Holt: Right, and that way we're able to capture those submit events just like a normal HTML form, and we can just send them off to the search page.

>> Brian Holt: So what we do here is now we're gonna have a handleSearchSubmit, which is going to take an event. The first thing we're gonna do with that event is preventDefault. I'm sure many of you have seen that before. But it is a form, if you actually don't prevent it from submitting, it's going to try and actually navigate the page for you, so you don't wanna do that.

[00:01:18] That's where the preventDefault() comes in. This is just like normal browser stuff, right, this isn't React specific. But then, what we want to do is we want to basically change the navigation to go to the search page, right. Well, React Router has a way of doing it, but it's kind of, well it's a new concept that I have to show you how to do it.

>> Brian Holt: So we've been talking about props and state, which you're gonna use props and state all the time. Those are absolutely core concepts to React and Redux. There's a third one that we haven't talked about. And the reason why we haven't talked about it is it's definitely what one calls a foot gun, right?

[00:02:04] It's definitely a way that you can shoot yourself in the foot. And it's called context. Now the first thing I'll tell you that me having written React for a long time, I have never written directly to context. Like I don't use context myself, however some of the libraries I use use context, and that's okay.

[00:02:24] So suffice to say that a library using context is an acceptable use. And I'm going to go ahead and assert with some controversy, so take my opinion as some grain of salt, that you should not write to context, period, right. If you're writing to context, you should probably just move to Redux.

[00:02:45] Okay, so why is props and Redux and state different? Right, so we know states and props, but what's context? Context is available everywhere inside of your React app. So it's almost Redux like in that sense, that if you write to context in this component, and this component way over here is reading from the same context.

[00:03:09] So it's essentially a global for your app. Now if that doesn't sound like a foot gun to you, I don't know what's wrong with you, because it definitely sounds like a foot gun, right. Like this is an easy way to really confuse what's going on in your app, right.

[00:03:26] Cuz I've talked about all the great reasons that React is super debuggable. And you know where everything is happening and why it's super great. And that's, in a particular sense in context, just throws all of that out the window, right. Because if I modify over here and then I start having a problem over here, I have no clue that the problem was actually over here to begin with.

[00:03:45] So does that make sense, like what context is? So it's actually made to be pretty difficult to modify context and to read from context. It's a specific act or opt-in process and the way that they do that to you is they actually make you do context types. But the difference is, so if, if we don't put a prop type for something, it still shows up in props, right?

[00:04:12] If we don't put a context type for something, it doesn't show up in context. So you actually have to opt in and say, I'm expecting this to come from context and it must be this type, or it's not gonna show up. So, I feel like that's the React team admitting that this is a foot gun, so make sure you are opting into your foot gun.

[00:04:32] [LAUGH] Okay, so all of that said, when we wrapped our entire app with React Router, with the browser router, the way that the browser router actually is working internally is it sticks its router on context. And then all the different components read from that same router. Well, we can read from the same router as well, so let's go ahead and do that.

[00:04:55] So we're gonna add a context type, so I put very first thing context type because I want all future people to know is, holy shit, they're using context here, and just have that flashing neon sign at the top.
>> Brian Holt: And we're going to pull off the router, which is going to be an object.

>> Brian Holt: And we also need to import that from prop types. Now I'm fine saying that router is an object, and just that, because I don't maintain the router, so I don't really care to describe the shape of it. So I'm just happy to say that that's an object.

>> Brian Holt: Okay.
>> Brian Holt: So,
>> Brian Holt: What we're gonna do here is then we're gonna say this.context.router.transitionTo('/search').
>> Brian Holt: This is the way that you programmatically navigate with React Router.
>> Brian Holt: Questions about this?
>> Brian Holt: Cool, so let's go make sure that actually works.
>> Brian Holt: Refresh.
>> Brian Holt: I don't know why my dev tools are having such a hard time today, but whatever.

[00:06:47] So now I'm gonna say house and if I hit enter, it navigates me to search.
>> Brian Holt: Any questions while I push up a branch real quick?
>> Speaker 2: Is it possible to do the navigation in a reducer?
>> Brian Holt: So I think ultimately what you're getting at, indirectly, or whether or not you realize that you're getting at, is can you have your routing done by Redux?

[00:07:31] The answer is there is a thing called Redux router, which is ultimately a thin wrapper on top of a React Router. So, if you're into that, I really don't know anything more about it than that cuz I've never used it, but it does exist. It's a separate library maintained by the same people.

[00:07:48] But ultimately it's using React Router at its core. And I also am not sure that they've written a v4 branch yet, so I think that's stuck on the older React Router for now.
>> Speaker 2: Okay, Francois is asking, so you gave us this big warning about context, is what you are doing the common way of doing it?

>> Brian Holt: I mean, this is the way you have to do it with React Router v4. So like I said, if a library I use integrates with contexts, then I'm okay using context for that. But I personally never write to context myself.