Check out a free preview of the full Complete Intro to React, v3 (feat. Redux, Router & Flow) course:
The "Sharing State & Updating the Search Component" 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:

The Details component is going to need access to the JSON data. Rather than make a duplicate request for the data, Brian moves the JSON data to the closest common ancestor component. This makes the sharing of state between components easier. Brian finishes some refactoring of the Search component now that it is managing its own state and no longer importing the JSON data. - https://github.com/btholt/complete-intro-to-react/tree/v3-15

Get Unlimited Access Now

Transcript from the "Sharing State & Updating the Search Component" Lesson

[00:00:00]
>> Brian Holt: And so now all our flow errors are resolved. So now we have kind of a inconsistency with our app. We have search, which is reading from preload, and we have app that's reading from preload. It would be better, since App is the parent of Search, then if we could just pass that data from the App into Search.

[00:00:21] So we don't have kind of two places reading from the same data. You'd rather have this one parent component reading that search data, and then passing that into both search and into details. In this particular case, when you're just loading a json file, it's probably not a big deal.

[00:00:37] However, imagine that this was coming back from the API. You don't wanna request it in two places, right, you wanna have it be requested once, and then passed into two different spaces. So that's the reason why I'm gonna show you this particular part. So what I'm gonna do here is I'm gonna change Search into a component like this, as well.

[00:00:58]
>> Brian Holt: And this is gonna be props. And we're just gonna pass shows in here, as well, and we're just gonna pass all of preload.shows,
>> Brian Holt: As wells as the props.
>> Brian Holt: Now notice we don't have to type these props, because we're not actually really reading from them, right?

[00:01:25] It's we're just taking an object and passing stuff in. And with flow, you don't have to go back and say, this is what these types are. The type inference is gonna be enough here. You can if you want to.
>> Brian Holt: But there's no good reason to.
>> Brian Holt: So now, we have to go back to Search and make it read from data, or not read from preload anymore.

[00:01:51] So what we're gonna do is we're gonna remove preload from this.
>> Brian Holt: And rather than doing preload.shows, instead of doing that, we're gonna say this.props.shows, right? Yeah,
>> Brian Holt: Okay? Now we have prop type there, right? Because we have to type our props.
>> Brian Holt: Okay, so let's go up to the top here, and underneath state, we're gonna add props.

[00:02:40]
>> Brian Holt: So you might be noticing that state here is different than props here. That's because this is in particular for typing. And this one here is actually a real variable that exists on Search, right.
>> Brian Holt: Okay, so what we're gonna do here is we're gonna have shows, which is going to be an array, right?

[00:03:04] Cuz it's gonna be an array of shows. And what we're gonna do here is, it's gonna be an array of stuff, right? If it was an array of strings it would look like that. So basically this is a parameter that you can pass into array to say, this is going to be an array of strings, or an array of mixed.

[00:03:25] All right, it can be an array of stuff, it can be an array of any. I don't care what's in here. It can be an array of anything.
>> Brian Holt: any is a cheating way by the way. any just says don't prop check this at all, right? Which is not actually what you want to do, right?

[00:03:41] So if at all possible, don't ever use any. You want to use other things, right? If you are tempted to use any, it's probably better to use mixed, right? Because mixed is saying this could be anything, but it's going to then try and continue doing type inference. If you say this is an any, it's like all bets are off, I don't care about this anymore, right?

[00:04:04] So be careful about that.
>> Speaker 2: If you choose mixed and then end up only putting in strings, is it gonna yell at you?
>> Brian Holt: It's not gonna yell at you. I mean, it's not a good idea, right? But it's not gonna yell at you. However, what is a blessing/a curse, with mixed.

[00:04:20] So let's say I was down here, and I tried to reference something in this.shows.or this.props.show, props.shows

[0], right? It's gonna say I don't know anything about this, so the next thing you're gonna have to do with this is say if typeof,
>> Brian Holt: this.props.shows you're gonna have to what's called do a type refinement, right.

[00:04:45] You're gonna have to validate to the type checkers, hey I went through this process and now, I'm positive this is a string, then I can call methods that are on string, right. And if you try to do that before, it's gonna say, I don't know what this is.

[00:05:00] Right, so if it's any, it's gonna say I don't care, do whatever you want, right? So any is a crutch, so don't use any if it all possible.
>> Brian Holt: Another thing is like if you're doing like imports on something that's not type checked. So like if I create another file that's not prop checked and I import it, it's going to import it as an any type, and it just makes it easier to work with, right?

[00:05:27] So files that are not opted into type checking are exported as any types. Okay, so that was kind of a side note on that. So we're gonna give it a particular shape of object to look for. So it's gonna be a title, which is a string. It's gonna be a description, which is a string.

[00:05:52] It's gonna be a year, which is a string. It's going to be an imdbID, which is a string.
>> Brian Holt: It's gonna be a trailer, which is a string. And it's gonna be a poster, which is a string. I think I got all of them, okay.
>> Brian Holt: So now I know I have this array of this particular type of thing, right?

[00:06:24] And I can be guaranteed that I can read anything off of it. Now, we have this particular object here, one this is kind of ugly, the way it exists right now, right? And the other thing is that we're going to be using these shows all over our site, right?

[00:06:42] So it'd be really nice if we could just declare this as its own type, right? So we can say type show equals all of these business.
>> Brian Holt: And we pass that in right here, so we have an array of Show,
>> Brian Holt: Right? Now we can even take this one step further.

[00:07:03] This is going to restrict this Show to this particular file. We wanna be able to use shows all of our projects, right? Cuz we're gonna be reading out of the details as well. So you could something like export a type from this file, or something like that, but we're gonna take this one step further and we're going to save this.

[00:07:20] And we're gonna go to our types file, and just put it in here. And I think that the way we're gonna want to do this is just say export type Show. And now, this is gonna be available throughout our different, or throughout our entire website. So, because it exist here, we can go back over here to search.jsx.

[00:07:44] And we don't have to import it, since it's in our flow type directory that's automatically just gonna be filtered into our page. So if we come in here and say yarn flow, I think we should still be gold. Nope, it doesn't like Show.
>> Brian Holt: Yeah, it's gonna yell at us for all of our tests.

[00:08:07] Yep, that's true. We did that.
>> Brian Holt: So, I mean, this is a good thing though, right? Because now we're telling that, hey, we have this prop type shows, right? And it's gonna say, hey, you're rendering this over here, and you're not giving it shows, right? That flow is kind of saying, you broke all of your tests.

[00:08:29] Do you know that you just broke all of your tests? Now, what you can do is you can make this what's called a maybe type. We're kind of getting off in Louise two, but I like showing you how to do this. If I put a question mark here, maybe I'll have some shows, right?

[00:08:49]
>> Brian Holt: So, this is now a lint error but, that's what this question mark means this is now an optional thing. Now, what the Airbnb default rules, or the Airbnb ES lint rules, it says that you have to have a default prop type if this is optional. So what you would have to then do is say defaultProps = {shows:, and just make it an empty array.

[00:09:22] AirBnB is super particular in what order they want things in.
>> Brian Holt: Anyway, that's how that should work, is you should be able to give it a default property type and should be okay with a maybe type. We're gonna require shows every single time, so it's not particularly important.

[00:09:53]
>> Brian Holt: Yeah, because,
>> Brian Holt: Yeah, that's fine. So, in any case, we don't need to fall props right now. So this is not important, because this is not a maybe type.
>> Brian Holt: So, now we're good to go. Now we have this array of shows. So now we're very safe to refer to, for example, here where I say show.title and show.description.

[00:10:21] All that stuff is guaranteed to be there, because I've typed that to be a show type, right? And that's now available to us throughout our entire application.
>> Brian Holt: So we have this.prop.shows, that's all good to go. Let's go back to, let's see, make sure everything works still. So we're gonna go back to AD80, browse all, everything is still working, which is good.

[00:10:55] And now all of these is coming from app.jsx, is being fed into search that way. Any questions about that so far?
>> Brian Holt: So let's go ahead and cut a branch, for anyone that fell behind there.
>> Brian Holt: Again, if you're in flow typing right now all of your tests are gonna fail.

[00:11:21] If you want to you can come in to your spec and just pass them in, shows={preload.shows}.
>> Brian Holt: And right there.
>> Brian Holt: And that's all we had to do to fix our tests. So yarn flow, now we're missing some prop type validations. We will get there momentarily.