Check out a free preview of the full Complete Introduction to React (feat. Redux and React Router) course:
The "Completing the Header Component" 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 adds the new Header component to the search page. He also modifies the function that handles the change event so it only receives the new search term and is no longer passed an event object. The actual onChange event is now handled inside the Header component to promote better encapsulation.

Get Unlimited Access Now

Transcript from the "Completing the Header Component" Lesson

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

[00:00:03]
>> Brian Holt: Benjamin H is asking about handleSearchTermEvent, we're gonna take care of that momentarily. Stay tuned, I guess is what I would say.
>> Brian Holt: So go back to search.jsx.
>> Brian Holt: Yeah, go back to search.jsx. And now, we're gonna have to pass all the1 stuff into,
>> Brian Holt: Into the header, sorry.

[00:00:38] [COUGH] So go here and say const Header equals = require('./header'). Okay, and now we're gonna rid of this business right here.
>> Brian Holt: Where it says header and we're gonna put Header here. But now we're gonna have to start passing some of this stuff into,
>> Brian Holt: Into the Header.

[00:01:04] So come down here and we're gonna say, handleSearchTermChange.
>> Brian Holt: And then we're gonna kinda modify this here up here in just a sec. I wanna say this.handleSearchTermChange and then we're gonna also pass it in the search terms. We're gonna say searchTerm = this.state.searchTerm, right, cuz this is coming from the state, not necessary from the properties.

[00:01:42] And then we're gonna also just do showSearch. And if you just reference it like that with nothing provided, it's gonna pass in true. So this is kind of a shorthand and actually our standard requires that, standard React requires that. But just know that that's equivalent to this.
>> Brian Holt: Right?

[00:02:05]
>> Brian Holt: That's the difference there. So here's another personal preference and I say most React developers agree with me, not necessarily all of them. This is kinda hard to parse, right, it's pretty dense. We're seeing all these properties being passed down, so you can actually put these on multiple lines like this.

[00:02:29]
>> Brian Holt: And its nice to be able to, that's pretty easy to parse, right, pretty easy to read. Looks kinda weird, because we're not used to seeing HTML that way but this this works okay with JSX. And then some people prefer to put the closing tag on the last line.

[00:02:44] I'm of the school of thought, it's nice to put it there, cuz then I can just keep adding, whoops! I can keep adding new things underneath it without having to make sure that that's on the right line. Up to you, you don't have to do that either.
>> Brian Holt: Okay, so let's talk about handleSearchTermEvent and why we didn't actually use it the same way.

[00:03:05] So what we're gonna do here is going to change this, the name of this function to be handleSearchTermChange. And then we're not gonna have it take an event. We're actually gonna just have it take the searchTerm.
>> Brian Holt: And then we're gonna change this to be searchTerm. Now why is that?

[00:03:24] We can actually make this work with events and we can actually just call raw from the child up to the parent given the event. But that actually makes this this particular function far less reusable. Because now it only works with events and that's kind of a problem. Because what happens if we have multiple places that we can change our search term, right?

[00:03:46] We have to either simulate some sort of synthetic event and that's a really gross icky thing to do, right? Creating this synthetic event that we're just like passing and creating ourselves. Instead, what we'll do is we'll unravel that event in the child then we'll pass up just the raw string, right?

[00:04:03] So let's actually just go do that really quick. So come back down to header.jsx.
>> Brian Holt: Did I call this handleSearchTermChange, I just wanna make sure, handleSearchTermChange is actually what I wanted. And then this handleSearchTermEvent, so actually what we wanna do here. So we're gonna make a new method here called handleSearchTermEvent.

[00:04:31] This is gonna take an event.
>> Brian Holt: And here we're just gonna say, this.props.handleSearchTermChange with e.target.value. Sorry, I tend to call my events e. I think it's a pretty common thing for most UI engineers but you can call this event if that makes you feel better.
>> Brian Holt: Okay, so does anyone who have a question about why I did it this particular way?

[00:05:17]
>> Brian Holt: It's in the interest of making that function more reusable. So now I can use it anywhere that I have to be able to handleSearchTermChange. And I'm using the same code path, which is always a good thing, right? We're using our code, which means less code, and that means one place to find bugs instead of two

[00:05:36]
>> Speaker 2: Did you want the onChange to be this.handleSearchTermEvent instead of this.props.handleSearchTermEvent?
>> Brian Holt: Yep, you're right.
>> Brian Holt: So here on onChange, there should be no props here.
>> Brian Holt: Okay, so come back to search for just a second.
>> Brian Holt: Make sure we're passing that in correctly, we are. The other thing I wanted to show you real quick, notice how we're saying searchTerm, searchTerm.

[00:06:19] Well there's a neat ES6 function that we can actually just say searchTerm and that works. And that's exactly the same as this. So those two things are exactly the same.
>> Brian Holt: And that's just an ES6 convenience functionality that if your property and the name of your variable is the same thing, you can just write it once and it will extrapolate that that's what you meant.

[00:06:50]
>> Brian Holt: Okay, I'll take some questions in just a second. Let's go make sure that I'm actually doing everything okay, make sure I didn't actually break our search here. So it's still rendering okay and it looks like it's still searching okay as well, so.
>> Brian Holt: Okay, any questions about that?

[00:07:12]
>> Speaker 3: What is let utilSpace doing?
>> Brian Holt: So let utilSpace is basically declaring I have a mutable variable that I'm going to use. So if we go back to Header, I mean you could just as easily say var here and that's just fine. Let is just kinda the new way of declaring mutability.

[00:07:31] It also has block level scoping, which we don't necessarily need to talk about. But for all intents and purposes for this, it's the same thing.
>> Speaker 3: I'm getting an error that the variable utilSpace is defined but never used.
>> Brian Holt: Do you have it down here?
>> Brian Holt: That's the part where we use it.

[00:07:52]
>> Brian Holt: See, isn't your linter helpful? [LAUGH] That's exactly the kind of errors you wan it to find.
>> Brian Holt: And I'll cut a branch and push it up here in just a sec cuz we're gonna kind of switch gears for a little bit after this.
>> Brian Holt: Questions?
>> Brian Holt: I can only assume I'm teaching this perfectly then.

[00:08:14]
>> Speaker 4: [LAUGH]
>> Brian Holt: All right so let's cut a new branch here.
>> Brian Holt: Okay, so I cut fem-20, so feel free to go grab that if your stuff's not working.
>> Brian Holt: Cool, so let's go and switch gears a little bit, unless anyone has any other questions?
>> Speaker 5: Can you just walk through quickly how data flows when a user adds an input?

[00:09:06]
>> Brian Holt: Sure, so coming to header, so a user's going to type into this input, right? Now every time that you type something it's gonna fire off an onChange event which is going to come up here to handleSearchTermEvent, right? This is gonna handle the event here. This in turn is going to call handleSearchTermChange which it's getting from its properties which is going to be a function, but this is given from the parent, right?

[00:09:34] So this comes back to our idea that children can call the parents and say, hey, I have something happened. But it's up to the parent to implement this handleSearchTermChange, right? The parent is under no obligation to change anything about its state. So the parent can say, if I'm being called by this child just ignore it, right?

[00:09:53] That's totally fine and that's totally a black box to this child. It has no idea of whether the parent's respecting this or not.
>> Brian Holt: Okay, so it's gonna call with event.target.value, which is going to be passed up to the parent, which is search.jsx. It takes in this searchTerm, right, which is literally just a string of what's changing.

[00:10:15] And then it's going to call setState with searchTerm, which actually gets propagated up here. We're changing our state, which is ultimately going to re-render our entire UI and that's how it works.