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

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. The code for the application up to this point is on the v2-15 branch. - https://github.com/btholt/complete-intro-to-react/tree/v2-15

Get Unlimited Access Now

Transcript from the "Conditional Display Logic Part 1" Lesson

[00:00:00]
>> Brian Holt: So now, we want to integrate this into search, right. Because we want to share it across search and across details, but we kind of have a bit of a problem, right. Because the header on search is slightly different than the header that's going to be on details.

[00:00:16] So, we need this kind of conditional ability to show some parts of the component onto search and show different parts of the component on details. So, we're gonna make this kind of conditional logic inside of search, sorry, inside of header. So, let's go back to, let's see, into header.

[00:00:39] Header.js.
>> Brian Holt: So, we're gonna show you first of all one of the annoyances to me about ES6 classes. I would love to be able to put propTypes, right here. Unfortunately, ES6 classes don't have properties yet. There is no way to put properties on header directly like this. So, the way you have to do it is down here, after we're gonna say Header.propTypes equals objects.

[00:01:19]
>> Brian Holt: I find this kind of a gross interface, but that's just the way it is. So, we are up here. We'll pull out func, bool and string, and we're gonna say, handleSearchTermChange, it's gonna be a func, showSearchTerm, showSearch rather. It's going to be a bool, and searchTerm: it's going to be a string.

[00:02:00] So func, functions. The reason why they can't put function there is you might've guessed, function is a reserved word. And I believe, bool is for similar reasons is Boolean. Oops, that needs to be equals. React.propTypes.
>> Brian Holt: This Boolean.
>> Speaker 2: Diego's asking can that be put into a constructor?

[00:02:27]
>> Brian Holt: The answer is no. [LAUGHS] The reason why that can't be it, because this needs to go on the static prototype. Which and this is how you put it on the static prototype. If I put it inside the construction, it's going to be on the instance. And it's a fine difference, but it does make a difference.

[00:02:57]
>> Brian Holt: That's a good question.
>> Brian Holt: And we were using, well actually, I don't. So one of the other differences, I'm just going to tell you real quick. I don't think we'll actually see it, but we're used to seeing getInitialState, right? That's not how ES6 components do it. They try and draw within the lines, and have a constructor,

[00:03:25]
>> Brian Holt: And the constructor gets passed props, and then you have to say, super props.
>> Brian Holt: And then, you say, this.state equals blah, right? That's just how, that how it works with ES6 components,
>> Brian Holt: The other thing, I don't think you're actually gonna see here, so say I had a method.

[00:03:50] This is the part that bugs me the most about ES 6 components. Say, I had some method, right?
>> Brian Holt: And I wanna say, this.setState.
>> Brian Holt: Blah goes to string, right? And then, I have this as like, onChange = Some this.someMethod.
>> Brian Holt: So, here's my biggest annoyance with ES6 components, and why I usually don't elect to use them.

[00:04:25] Some math, jeez. Okay, so some method. Whenever this onChange happens, it's gonna call this method right here. When you use Reactor to create class it does auto binding of context for you, so this is always going to refer to Header, right, the component. And ES6 classes do not auto bind your methods for you.

[00:04:51] So, you have to somehow get that context to be correct. The quote, unquote easy way to do this is .bind(this). However, this is super imperformant because this render method gets called hundreds of times, thousands of times, right? So, it's gonna call bind every single time, and bind is not cheap, right?

[00:05:15] And so, what you actually have to do is here, inside of your header, you just have to have a bunch of these gross this.someMethod = this.someMethod.bind this, and then down here you don't have to do that anymore.
>> Speaker 3: Can't you, I mean-
>> Brian Holt: There's other way, you can do it with-

[00:05:33]
>> Speaker 3: Can you do stuff up to, I haven't done JavaScript, but you do in a struct you say, self = this, and then, just use the close issue, self.someMethod instead-
>> Brian Holt: Yeah, but that's really gross too. [LAUGH] I mean there are other tricks like that to get around it.

[00:05:52]
>> Brian Holt: That self-pattern is kinda frowned upon in the JavaScript community.
>> Speaker 2: Comment from chat. They're talking about where you're down at the bottom of where you're setting the PropTypes on Header. Basically saying, could this be put at the top?
>> Brian Holt: Nope.
>> Speaker 2: You have to define the class before you can set the extra prop types, right?

[00:06:14]
>> Brian Holt: Yeah, I've got to remember what kind of hoist is on there.
>> Speaker 2: Because this doesn't do the right hoisting.
>> Brian Holt: Yeah, it's not going to hoist it, I don't believe.
>> Brian Holt: I guess, we can try. Okay, so I'm gonna get rid of all this grossness right here.

[00:06:28] Because we don't actually need it. I just wanted to demonstrate to you the difference.
>> Brian Holt: So, that's why I go, I'll and answer the question, but this is why I go with createClass, is that autobinding is just so nice. I don't have to worry about context, right? And that to me that's worth, I don't know, not using the ES6 classes.

[00:06:56] Okay, I don't think we can move it, but we'll try. You know what? I think our link will yell at us. Maybe.
>> Brian Holt: Maybe not.
>> Brian Holt: Yeah, header's undefined. That's what you get.
>> Brian Holt: I'm not sure of all the hoisting rules that come with classes cuz I don't really like classes, so I generally don't use them.

[00:07:28]
>> Speaker 2: So, there's a whole bunch of questions across about this. What does this.sum method equals this.sum method.bind this exactly do internally?
>> Brian Holt: All it's doing is it's taking this.sum method, which is a method that we defined, right? And it's replacing it with a new method with a bound context of what it was previously, which is abstract, I know.

[00:07:53] But there's nothing different than saying, var double = function that takes in a number,
>> Brian Holt: And returns num*2, right? Then I could say, double = double.bind(this). So, bind is just, that's an ES5 function. That's not this, sorry. Double
>> Brian Holt: This is a stupid example, right? But now,
>> Brian Holt: No, you would do this, whatever.

[00:08:32] This is a bad example, I'm gonna delete it.
>> Brian Holt: But it's an ES5 method that just binds the context. So this, whenever you call it in any context, always refers to whatever this was when you called bind. That's the gist of it. If you want a more in-depth explanation, I would say check out one of Kyle Simpson's courses on front end masters, read one of his books, read a blog post on it.

[00:08:57]
>> Speaker 4: ES6 stuff?
>> Brian Holt: For bok.bind.
>> Speaker 4: .bind, yeah. Advanced JavaScript
>> Brian Holt: Yeah, that's JavaScript.
>> Speaker 2: Lots of questions about possibly using arrow notation, it removes the bind issue.
>> Brian Holt: Yeah, it does. But the issue is, that's not officially part of JavaScript yet. So, you're getting into the class properties, right?

[00:09:25] Class properties, I don't believe are part of the spec yet. They're going to be part of the spec, because, Lord knows, we need them. And if you use the arrow function, you would side step this problem. But until we actually get those natively available, I don't use them.

[00:09:42]
>> Speaker 2: Yeah, talking about using Babble stage two.
>> Brian Holt: Yep, don't. That's why I, so, in stage two is fun for messing around with, but dear God, do not ship stage two to production, or else you're going to have a bad time. If you want a good story about that you should tweet @jimyoung [LAUGH] and ask him about shipping stage zero code, that's a good story.