Check out a free preview of the full Complete Intro to React, v3 (feat. Redux, Router & Flow) course:
The "Conditional Display Logic Part 1" 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:

Now that the Header component is being used in multiple places, it will need some conditional logic to determine whether or not the search bar should be shown. Brian begins adding this functionality be creating a boolean propType property named showSearch.

Get Unlimited Access Now

Transcript from the "Conditional Display Logic Part 1" Lesson

[00:00:00]
>> Brian Holt: So now we need to make this header account for what happens with, let's actually do that, too, as well. So we're gonna turn this into a component here. It'd be really nice on details pages if there was a back button in the header that you could go back to the search results.

[00:00:18] So let's go ahead and make use of that, too.
>> Brian Holt: So what we're gonna do here is we're gonna say if,
>> Brian Holt: (show) well, I wanna do that. We're gonna create something called util space
>> Brian Holt: And we're gonna take in the props here.
>> Brian Holt: And we're gonna pass in a property called showSearch, right?

[00:01:04] So if a user wants to show, or let me rephrase that. If you're on the search page, you're gonna wanna show a search box, right? If you're on the details page, you're gonna wanna show a Back button to go back to the search results. So if we pass in this boolean showSearch, then we're gonna say utilSpace is gonna be equal to,

[00:01:30]
>> Brian Holt: We'll say for now just an h1, we'll come back to it. else utilSpace is going to be equal to this h2 that we're gonna create.
>> Brian Holt: And it's gonna be another link which is going to go back to /search which is gonna say back. And then close it, close that.

[00:01:59] So we're gonna have this utilSpace right here, and then that's just going to go underneath the,
>> Brian Holt: h1 here.
>> Brian Holt: So now we have this props.search, so the first thing we're gonna have to identify is what those props can look like. So one of them is gonna be showSearch which is going to be a bool.

[00:02:28]
>> Brian Holt: But the thing is, is this is gonna be optional, right? It's gonna be an opt-in sort of thing, so we're gonna make it a maybe type. It might show up, it might not. If it's there, then yes, show them the search box, right? If it's not there, then we're just gonna assume they want the back.

[00:02:46] However, if you remember, you have to give it default props if something like that happens. So we're gonna go down here at the bottom, and say Header.defaultProps = showSearch, which we're gonna default to false, right? If they don't ask for search, then we're just gonna assume that they didn't want it.

[00:03:18]
>> Brian Holt: And so that's how you do this maybe type here. So now if you save here and come back and refresh here, notice way over here in the corner we have a Back button. And if we hit Back it's gonna take us back to the search results page.

[00:03:35]
>> Brian Holt: Cool?
>> Speaker 2: Can you go back to the header?
>> Brian Holt: So this is the maybe type right here. And then down here, you just have to tell it what the default props are.