Check out a free preview of the full Complete Intro to React v2 (feat. Router v4 and Redux) course:
The "Updating the Search Component" 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 spends a few minutes answering audience questions about how properties are passed between components and how React transpiles JSX code. He then finishes some refactoring of the Search component now that it is managing it’s own state and no longer importing the JSON data.

Get Unlimited Access Now

Transcript from the "Updating the Search Component" Lesson

[00:00:00]
>> Brian Holt: Does this still seem like black magic to anyone?
>> Speaker 2: I think the chat is going crazy with all the black magic. I don't even know how to ask the question. They're talking about how props get from one place to another place.
>> Brian Holt: Sure, so these props right here, right?

[00:00:18] This is what's coming from BrowserRouter, right? When BrowserRouter matches a route, it passes just a handful of properties in, right? So we wanted to preserve those properties, cuz we need to reference the ID, right? Well, we don't in this particular one, but eventually, in details we will have to.

[00:00:39] So this is called the spread operator. And we did this previously with, jeez, where did we do it? ShowCard, yeah, so we did it inside of search, right here, right? Same thing right here, we're taking a show and instead of writing out poster = show.poster, title = show.title, all those different things.

[00:01:02] We're not doing that anymore, we're just passing everything from show onto ShowCard, right? We did that, this is literally no different. There's nothing different between what's happening here, and what was happening with ShowCard. It's the same operator.
>> Speaker 2: Okay, I have a clarification. [LAUGH]
>> Brian Holt: Sure.
>> Speaker 2: The question actually was, why did you need to import React when you were building this dateless component.

[00:01:33]
>> Brian Holt: You might not actually have to, let me think about that. No you still have to. Reason being is you have to remember, we're using JSX and JSX is transpiled from the JSX that we wrote to being functional calls, right? Well, it's being transpiled to React.createClass. So if I have const Comp =,

[00:02:08]
>> Brian Holt: Right? If I have something that looks like this, where this is just really a function that returns a div, right? This is actually being transpiled to the var Comp = function () {return React.createElement('div')}, right? That's more or less what it gets transpiled to. So the transpiled code uses React, right, so you still have to import it.

[00:02:36] So anywhere that you're using JSX, you also have to pull in React.
>> Speaker 3: So there was a question earlier that asked how does React know that it needs to do that transpilation? And the answer, I guess, is that your importing React. And it sees that your returning, just a bigger angle bracket without quotation mark around it.

[00:03:01]
>> Brian Holt: Say that last part one more time.
>> Speaker 3: So because the function is returning something with angle brackets around it.
>> Brian Holt: Yes, precisely, so everywhere that you see jsx, it did transpires that to React.createElement, right, that just always happens. And you can configure Babel to do something else, right?

[00:03:19] There's other libraries that use JSX, JSX, is not specific to React. You can do it with Vue, you can do it with Deku, you can do it with a bunch of other different libraries. But React is just the most common one. Does that address your question?
>> Speaker 3: Thanks, yeah, that's perfect.

[00:03:38]
>> Brian Holt: Cool.
>> Brian Holt: Okay, so you feel good about this component right here and what's going on right here? It's a little dense, but I want to make sure that you get it. Cuz it is a really cool use case for React.
>> Speaker 2: Yeah, I think there's still questions.

[00:03:56] If you go back to details, actually, is where the problems are that I think they're having. When you're at line eight and you're saying this.props, they want to know where does that come from?
>> Brian Holt: this.props is, what properties are being passed in, right? And do they're just passed in from the router.

[00:04:16] The router just passes down a bunch of properties.
>> Speaker 2: Right, how does it ends up on this, I think, is also a question?
>> Brian Holt: How does it ends up on this?
>> Speaker 2: Mm-hm.
>> Brian Holt: Through the internals of React [LAUGH].
>> Speaker 2: It's the binding basically that route-
>> Brian Holt: Right, so I can see what you're saying.

[00:04:35] The answer of how it's getting there? If we go back to back to the ClientApp.Js. So we have BrowserRouter, right? And then to BrowserRouter, we're passing in a component. And the one that actually renders that component is in inside of ReactRouter, right? So ReactRouter's actually instantiating our component and passing it a bunch of properties.

[00:04:55] So that happens all inside of ReactRouter.
>> Brian Holt: Any other questions? Or does that address that?
>> Speaker 2: I don't know if it's addressed it or not. Christopher, can you come back and tell us if you've got it yet?
>> Brian Holt: Well, we can definitely come back if it's still confusing.

[00:05:14] So let's go to search.js. Now we're getting passed in shows as one of our props, right? So instead of importing it up here, we're going to delete that. And here where it says preload.shows, we're gonna say this.props
>> Brian Holt: So, see the other reference. Yep. So that should be it.

[00:05:46]
>> Brian Holt: I need to fix my notes there.
>> Speaker 2: What did you delete from the imports?
>> Brian Holt: The preload.
>> Brian Holt: So this is in search.js? I had,
>> Brian Holt: That one.
>> Speaker 4: And you just import, preload?
>> Brian Holt: What's that?
>> Speaker 4: Import preload, you just.
>> Brian Holt: Yeah, I just delete it.

[00:06:13]
>> Speaker 4: Okay.
>> Brian Holt: And then instead of saying preload.shows down here, you say this.props.shows.
>> Brian Holt: And then I'll push a branch right after we finish this.
>> Brian Holt: Okay, so now if we say if 1, our linter will yell at us, cuz now we're using shows up here.
>> Brian Holt: So now, if we go back to search, we should have not broken it.

[00:06:47] So it should still work, nothing should have changed, right? But now the shows are coming from client app as a parameter instead of being imported through JSON.
>> Brian Holt: Okay, so let's go back to search and fix our propTypes.
>> Brian Holt: So, what are shows?
>> Brian Holt: shows: is an arrayOf,

[00:07:26]
>> Brian Holt: An arrayOf shapes with title and description.
>> Brian Holt: Which are strings. Then we got to just pull them out up here, const { arrayOf, shape, string } = React.PropTypes.
>> Brian Holt: So arrayOf, hopefully self-describing, but it's just saying that I am going to have an array of something. Shape, we used before, it's just gonna say, I'm gonna have an array of objects, right?

[00:08:10] And the objects all are gonna have title and description.
>> Brian Holt: That will be strings.
>> Brian Holt: Now again, I want to point out, I'm using arrayOf, which means I'm going to describe what's going to be in my array. But say it's not homogenous, right, they're not all the same type of objects, with all the same types.

[00:08:33] You can just say this is going to be an array of stuff. You would just do that by saying array and getting rid of all this stuff, right? It'll look like that. But we want to be more descriptive, because we know those objects look like and they are homogeneous.

[00:08:51]
>> Speaker 2: So if you had multiple different types of objects inside of your array, but you knew what all of them were. You could just say arrayOf and then separate them with commas? Does that work?
>> Brian Holt: I don't think so.
>> Speaker 2: Okay.
>> Brian Holt: I don't think so.
>> Speaker 2: Okay.

[00:09:05]
>> Brian Holt: Not that I know of.
>> Speaker 2: That's a question for the docs.
>> Brian Holt: Yeah, definitely, the one thing I will say about props is, you can write your own prop types. So, in that particular case, you could write your own prop type. And say, this is going to be this, it's going to be pairs of this, right?

[00:09:19] That would work.