This course has been updated! We now recommend you take the Complete Intro to React, v7 course.
Transcript from the "Sharing State" Lesson
>> Brian Holt: Problem that we're gonna run into here momentarily is that we wanna pull from that same preload JSON that we've been using inside of search. Now, what we could do which if this was a real app and I was really pulling from JSON data it would probably be okay to just import that in two different places.
[00:00:19] However, assuming that this came from an API, you don't wanna have to request the same data twice. Does that make sense? So rather than trying to request twice, a better thing that we could do is push up the data.json to a common ancestor component and then have that data be passed down to both components.
[00:00:38] So that's what we're gonna do. We're gonna refactor Search.js to get it's shows from the router instead of just importing it. So let's go ahead and do that first, so let's go to clientapp.js
>> Brian Holt: And in here we're going to import
>> Brian Holt: Preload from ../public/data.json it'll find either one of those.
[00:01:18] We'll do it that way.
>> Speaker 2: Could you show details again, please?
>> Brian Holt: Sure.
>> Brian Holt: It's not really doing too much right now like we're gonna go ahead and change everything here momentarily. So as longer as something renders to the page, you're okay
>> Brian Holt: What it actually shows is not really important.
[00:02:03] So I'm gonna show you kind of an advanced use case here of react but I think it's a little easier if I show you. Kind of a basic example of it first. So actually let's go back to details real quick. Notice that details has no state and it's not even reading for props.
[00:02:29] It really is just a static component that just spits out mark up right. But more importantly, it has no state that it's keeping track of or manipulating, so you can say it's stateless. Why this is important is you can actually just cut out this entire React createClass business.
[00:02:47] And we could just really say const Details = function.
>> Brian Holt: And this function just returns like an h1 or something like that. So this function really just ends up being like the render function. So it has no wrap around it. It's really just a function that returns. So now if I save this and come back over here and refresh, notice this still works.
[00:03:20] This is called a stateless functional component. I love these. I use them everywhere that I can because by making these components simpler, first of all, it's easier to understand. You don't have to understand the create class and the render, there's no object configuration. It's just a function.
>> Speaker 3: Is this like a static method?
>> Brian Holt: Yeah.
>> Speaker 3: Equivalent?
>> Brian Holt: Yeah, that's a good way to think about it. These can accept properties, so if I pass properties down to details. Like you remember we have the params on there that we saw earlier? So if I say, props.params.id, this'll actually output whatever the ID is in the URL.
>> Brian Holt: So it can still accept properties, it just takes them as an additional parameter. Yes?
>> Speaker 2: Jack is asking, what tells React that it is a create class? Jsx?
>> Brian Holt: Tells it that it is a create class. So this isn't being transpiled at all. It's really just a function.
[00:04:34] So there's three ways to create components. I've shown you two, now. I've shown you the create class method. Which is the one that you use if you need to use state and some other functionality like that. Or some of the life cycle methods, which we haven't talked about yet.
[00:04:53] But then there's stateless functional components which are really just a render method.
>> Brian Holt: And React just knows what to do with both of these.
>> Brian Holt: Does this make sense? What's going on here?
>> Speaker 4: What is it called again? A stateless?
>> Brian Holt: A stateless functional component.
>> Brian Holt: Now, we can kind of abuse this and get some really cool mileage out of this.
[00:05:21] And Lord knows that I love to abuse things. So we're gonna go ahead and just do that. So you can drop this. Details will eventually have states. So you can put it back to the way it was. But I just wanted to demonstrate to you how a stateless functional component works.
[00:05:38] So keeping this in mind, we're gonna enact a client app.js. And we need to pass parameters to search. But search isn't actually being instantiated here we're just passing it like a blueprint for a component. So this doesn't really work yet. We have no way to really pass parameters directly to search and yet, we need to.
[00:06:03] While keeping in mind that can actually just make functions that return mark up, we can kind of abuse that paradigm to pass parameters to search. So instead of having directly putting search here, let's actually put this in multiple lines so you can see what I'm doing a little bit better.
>> Brian Holt: For the record, I do this all the time. This looks like bad HTML, but this is a ton easier to read when you're passing 15 different kind of parameters. So now I have to pass something to search. So what I'm gonna do instead is I'm gonna make a function inside of here, it's gonna be like anonymous component out of here.
[00:06:45] So it's gonna be a function that returns search,
>> Brian Holt: This is the shorthand for writing a function, cuz there is an implicit return here
>> Brian Holt: So so far, this isn't really too cool. And just to rewrite this out so you can see kinda verbosely what it's doing.
>> Brian Holt: Some people get caught up into the terse syntax.
[00:07:15] I don't want that to happen to you. Does that make a little bit more sense? That’s what’s happening, but okay.
>> Brian Holt: But remember that this component receives properties from the route that we need. We need to preserve that those properties are getting passed through. Cuz right now we’re not passing any properties to search, and we need to propagate whatever properties that would have gone through the search.
[00:07:43] So we're gonna take in the props.
>> Brian Holt: And then, you remember that spread operator that I showed you? ...props.
>> Brian Holt: So this way, I don't actually need to know what's in props. I'm just taking whatever props I was going to be given and I'm going to pass them directly through to search.
>> Brian Holt: And then now I need to pass this preload in there, as well. So now I can just do that right here.
>> Brian Holt: preload.shows, is that what I did? Yup.
>> Brian Holt: So this is a little clever, and this is definitely more of an advanced used case with React.
[00:08:38] But I think it's pretty compelling.