Current section: Custom Components 22 exercises
solution

Simple Function

Loading solution

Transcript

00:00 Our objective here is to reduce the duplication. And the way that you reduce duplication in JavaScript is you make a function, and then you call that function. So we're going to make a function, a function called message. And it's going to accept some parameters.

00:16 Maybe we want to have the parameters be an object. So we'll call this props. But I'll just destructure that into children. There we go. So it's a props object. We're going to destructure the property called children. And then we will just return this. And we'll interpolate the children in this position.

00:35 Children, there it goes. And then down here, we can say message. We'll invoke it with the children set to the respective messages. And close our interpolation. Boom, there we go.

00:51 Result is exactly what we wanted in the first place. It's all still working as expected. But now we have reduced duplication. So if I wanted to add a message, and maybe we want to put it in a box or something, now both of these have a box. And I don't have to update it in both places.

01:09 That's part of the benefit of reducing that duplication. That's why we do it. So that is that. Now, of course, the children, we don't have to call this children. We could call it greeting or whatever. And that will still work. There's nothing special about that,

01:28 that particular name. And in fact, the way that we have it written right now, there's nothing special about the fact that this is an object at all. We could just have this be children. And it's whatever they pass to us is going to be applied as children. But we're going to keep it as an object, because this is getting us closer to the way

01:46 that React components actually function. And so we'll leave it as an object with the children prop or property and forward that along. And that is working swimmingly. So this isn't, again, not quite the way that we do React components. And in fact, it doesn't even have the same semantics. It's doing things a little bit differently.

02:05 But we'll explore that in the next step.