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 "Conditional Display Logic Part 2" 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:

Brian finishes the conditional display logic in the Header component by using the showSearch propType to determine if the search bar should be displayed. Once he has this code in place, Brian refactors the Search component to use the Header component. The code for the application up to this point is on the v2-16 branch.

Get Unlimited Access Now

Transcript from the "Conditional Display Logic Part 2" Lesson

>> Brian Holt: Okay, let's go to search.js, but I don't think we've finished up here. No, we didn't, sorry, go back to header. So we defined our prop types down here. And now we're actually going to go use them. So inside of render,
>> Brian Holt: We're gonna say let utilSpace.
>> Brian Holt: If this.props.showSearch,

>> Brian Holt: utilSpace = input. In fact, you can just go grab it from search.js. So go grab this input real quick,
>> Brian Holt: From search.js, and then go back to header.js and just paste that in there. Except the only difference is onChange is gonna come from this.props.handleSearchTermChange. And that is going to come from this.props.searchTerm.

>> Brian Holt: Else utilSpace = and we're gonna make it so on the search page it's gonna show,
>> Brian Holt: This input. And then on the details page, we're gonna put a back button so you can go back to the search.
>> Brian Holt: So we're just gonna put an h2.
>> Brian Holt: I don't think I need that.

>> Brian Holt: Link to='/search'>.
>> Brian Holt: Back.
>> Brian Holt: Okay? So now, we have this utilSpace, which is this variable containing one of two different components, right? So we can actually just come down here to the header. And right after the h1, just say output whatever's in utilSpace.
>> Brian Holt: Does that make sense?

[00:02:20] It's just saying dump out this component, whatever component this utilSpace has
>> Brian Holt: Questions?
>> Speaker 2: How do we avoid having to copy and paste the input?
>> Brian Holt: What do you mean how do you avoid?
>> Speaker 2: By having to write out the input box. Again, essentially can we reuse it from one location?

>> Brian Holt: So this is exactly what we're doing. We're abstracting it out of search, and then we're going to delete it in search.
>> Speaker 2: From there, okay.
>> Brian Holt: Yeah.
>> Brian Holt: Yeah, we're doing it precisely so we don't have to repeat ourselves, so we have exactly one source of truth.

>> Brian Holt: Cool, so now Header can handle both the search page and the details page, so let's go put it on the search page.
>> Brian Holt: Okay, so here where it says header, well, first of all let's import it. So we're gonna say import Header from './Header'.
>> Brian Holt: And then here where it says header, we're gonna say Header, but we need to give it a couple more things.

[00:03:45] So we need to give it showSearch, and we need to give it searchTerm= this.state.searchTerm. And we need to give it handleSearchTermChange, which is this.handleSearchTermChange.
>> Brian Holt: So people get kinda tripped up on showSearch with no parameter. This is exactly the same as saying, showSearch = true. But if you just leave it off the = true is implied, so just leave it off.

>> Brian Holt: Questions?
>> Speaker 3: Can you go back to Header?
>> Brian Holt: Yeah.
>> Brian Holt: Scroll down.
>> Speaker 3: I can't scroll down.
>> Speaker 2: Just a quick question, you are gonna cover immutable this afternoon?
>> Brian Holt: Nope.
>> Speaker 2: You're not, no state stuff?
>> Brian Holt: Like immutable JS?
>> Speaker 2: Yeah.
>> Brian Holt: I like immutable, but it's outside of the scope of what I wanna talk about today.

>> Speaker 2: Okay, sorry. You like it though, right?
>> Brian Holt: It's cool, no, it's amazing. It's kind of heavy handed, I don't wanna say heavy handed, but it's just a heavy library. They're asking if you can go back to the search file, please.
>> Brian Holt: So, yeah, cool.
>> Brian Holt: So let me go make sure this actually works.

[00:06:03] Refresh, I gotta do this all the time, npm run dev. Let's just split that.
>> Brian Holt: Okay, refresh
>> Brian Holt: Okay, so now notice on our details page, we have a nice little back button up here, which takes us back to search. Now, if we go back to search,
>> Brian Holt: You can still type House of Cards, it's all abstracted out and it still works.

[00:06:38] Despite the fact that all of the display logic has moved into the header. It's still interacting the same way.