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

Since the search input field in the Landing Component is not navigating to the search page, Brian wraps the input in a Form component to utilize the onSubmit event. Brian takes questions from students.

Get Unlimited Access Now

Transcript from the "Search Submit Event" Lesson

[00:00:00]
>> Brian Holt: So definitely is something that we would wanna do because we wanna make search read from as well, right? Cuz now we have searchTerm in reducts and we have search as state of search, right? So lets go to search.jsx, and lets go break all of our tests again which is exactly what we're gonna do.

[00:00:21] So we're gonna import { connect } from "react-redux".
>> Brian Holt: Okay, so we are actually going to use our context here. So we're gonna see how to use context. Okay, so we have search which,
>> Brian Holt: Okay, that's what we're doing wrong here. Yep, so sideline this for a second.

[00:00:56] We actually need to go back to landing for a second and finish doing this. Cuz the problem is we have no way of actually getting to the search page, with our search term, right? So what we wanna do here is, we're gonna be, import React, import that, and then we're gonna import Link, which we did.

[00:01:16] We're going to import Object,
>> Brian Holt: From prop types, which I'll show you why in just a second.
>> Brian Holt: And we have a search term that's all good. We're gonna turn landing into a class now because we're gonna have to do, we're gonna have to have methods. So class, let's just do it this way.

[00:01:42] Class landing, extends Reatc.Component. You have to import that up here as well.
>> Brian Holt: Okay, it's gonna have a render method.
>> Brian Holt: Which is just going to,
>> Brian Holt: Return that, okay, and then I need have is this props. Which rewind to have up here, so props are that,
>> Brian Holt: Then again, I just love to sing the phrases are prettier this is super ugly formatted, right?

[00:02:37] But the nice thing about it is, as soon as I save, prettier just rescues me and fixes all of my indentations and stuff like that, I really like that. So now we have to refer to props as this stop props. So this stop props there, and why did you do that?

[00:02:59] I don't want you to,
>> Brian Holt: There we go.
>> Brian Holt: Nice if those are on multiple lines.
>> Brian Holt: Cool.
>> Brian Holt: So now we've agreed for a factor to be in ENX class, now what we want to do is any time the user hits Enter in landing, we want to route them to the search page, right?

[00:03:38]
>> Brian Holt: So the way we're gonna have to do that. Is we're gonna have to listen for an enter keys, right? And as soon as they hit Enter, we're going to change the location from the landing page to the search page, right? So the way you do that is you have to get access to what's called the history object.

[00:03:58] And so you're gonna say static, contextTypes = history: object.
>> Brian Holt: So what this is, one it's just a good idea to declare that this component has a dependency on this context item. But the other thing is, unless you declare to react, it's like, hey I'm gonna be looking for this context item, React actively hides context from you.

[00:04:34] The reason why is it does not want you to use it unless you explicitly mean to. So it's gonna force you to say, no React, I actually do want history. Otherwise, if I say this.context.history, despite the fact that it's actually technically there, it's not gonna let me access it.

[00:04:50] So you actually have to opt into that.
>> Brian Holt: Okay, so the way we're going to make this work. And I find this to be a useful way of handling events, in particular of keyboards. Cuz you can actually just have a form above it, and then say, onSubmit. This.goToSearch.

[00:05:24]
>> Brian Holt: I will say this is not the only way to do it, this is just one way I've found nice to do it.
>> Brian Holt: Okay, and now we just need to write this go to search function.
>> Brian Holt: So goToSearch, goToSearch, we're gonna make it an arrow function because it's going to refer to something on context.

[00:05:57] So it's gonna be equal to, event: SyntheticEvent like that.
>> Brian Holt: And then, the first thing we're gonna say is event.preventDefault. I'm sure many of you have done that before. This is going to prevent the forum from submitting. And then we're gonna say this,
>> Brian Holt: I didn't even use that.

[00:06:38] Well, yeah, okay. We actually don't even need the context types here. I forgot the React router changes the way that they do context types. So go ahead and delete that, and delete the object from prop types. And instead, you're gonna say this.props history, so the way they used to work with react router like v3 and v4, is that you had to opt in and use context types, access history.

[00:07:13] Now it's actually injected to every route. So we can actually, because landing is a route it has access to history. So we're gonna say this.props.history.push
>> Brian Holt: /search.
>> Brian Holt: Okay. It's gonna say hey, I don't know what history is. This is what flow is gonna say. Luckily we can type that pretty well.

[00:07:47] So come up here and say, import type.
>> Brian Holt: {RouterHistory, yep, RouterHistory} from 'react-router-dom'. And then we can say history is a RouterHistory type.
>> Brian Holt: That fixes everything.
>> Brian Holt: Yeah.
>> Speaker 2: Yeah, there's a few different things. Could you use a redirect component?
>> Brian Holt: Totally could. So there's an imperative way and a declarative way of doing it.

[00:08:29] So, react-router has a redirect component that, if a redirect component ever gets rendered, then it redirects somewhere else. I'm a little uneasy with that paradigm, because you would do something like if blonde, then redirect this way. Yeah, I prefer to just use history directly, but that's up to you.

[00:09:02]
>> Speaker 2: Does using Redux eliminate the need to use local React component states since each component can subscribe to the particular portion of the Redux state?
>> Brian Holt: That is up to you, I'm gonna say that the way I choose to write React when I have Redux, cuz I kinda separate two different kinds of state.

[00:09:21] I have application state and I have view state, right? View state is something that's like particular to the presentation. It's gonna be like is this in focus or where am I scrolling like those sorts of things that have to do with how I'm presenting my particular component. I still have that dev in react state.

[00:09:41] And then application state is things like, things that came back from the API. And those sorts of things that could be used across the application. That's kind of up to you how you dev that up, I would say that the dividing between application and view state is a pretty common way to do it.

[00:10:00] But totally up to you.
>> Speaker 2: Yeah, some people are saying that a global apps state versus a local component, use set state for the local component state, versus a global app state.
>> Brian Holt: Yep, totally.
>> Speaker 2: Can't you use history directly from the router?
>> Brian Holt: I mean, this works this way.

[00:10:31] I think this is a good way of doing it. There's other ways to accessing history, but I think this is good.