React and TypeScript React and TypeScript

Higher Order Components Solution

Learning Paths:
Check out a free preview of the full React and TypeScript course:
The "Higher Order Components Solution" Lesson is part of the full, React and TypeScript course featured in this preview video. Here's what you'd learn in this lesson:

Steve live codes the solution to the Higher Order Components exercise.

Get Unlimited Access Now

Transcript from the "Higher Order Components Solution" Lesson

[00:00:00]
>> So our mission is we're gonna take this component that takes a user and it takes a salutation. And what we wanna do with it is have it just like, we wanna create a hierarchy, wanna pass in the user but still have a take the salutation. So a little bit of extension on what we did previously.

[00:00:19] We'll make it a little bit better than the last version as well. So first of all, all right, we know that the width user is just gonna pass in a user model, so we'll start with that. And so we'll say the type of withuserprops is going to be user, just give me one of our user models.

[00:00:40] All right. So we've got that in place. And now we're gonna make our function called with current user. Seems like a good name for A component is gonna take a user. And so we've got that in place. And what we're gonna do is we'll start with the kind of the same pattern we had before what other types in a second.

[00:01:03] So it's going to take a component and it's going to return the props. Again, like all the type stuff we did a second ago, we will do again. And it's gonna return the component with all those props spread at first. So spread operator like normally if you wanted to spread all like an object of props across react component, you would write it as so, but we also need to typecast it.

[00:01:35] So we're gonna wrap it in parentheses. And then the user is going to be that current user up there. Right. All right, TypeScript. It's like what is t, you never told me about t component. I don't know what it is props. I don't know what it is we are, we're gonna handle all of that momentarily.

[00:01:53] So all right, first of all we want to say we're going to have this idea of t and the component will be some kind of react component type. All right. So we've got that in place. Now to be clear, really typesafe is going to figure it out based on the component that we passed in.

[00:02:18] But if you instead of doing with current user and then passing in the name tag component, and having a figure out you could define that it has like name tag props. You don't need to do that. From some of the stuff we saw when we did that generics exercise earlier, which is when we have a function, TypeScript will do everything in its power to try to acquiesce what you actually meant.

[00:02:42] So we can skip that. But we're gonna need to give it a little bit more information to make it happier. I also need to import react. So import star as react so that we can use react component type there. All right, so we've got that in place. And the other thing that we can do is, go here and say we'll do our omit again.

[00:03:10] We'll say that this is going to be, props is going to be omit. And then whatever prop types we're working with, and just take out everything that's in with user props. Cuz we're gonna say like, this new component takes whatever it took originally, in this case, salutation. But take out everything in with user props which is the user.

[00:03:29] So hopefully that will get us to where when I goes to key of with user props. Close that angle bracket. So we got most of the high order component in place. So now we've got this name tag and we can say. Name tag with current user was with current user.

[00:03:55] Name tag, and we'll swap this in. All right, it's now angry about with the fact that we have a user because like no you made a new type that removes that. So, this will work. There is one other kind of cool extension that we can do. And we can also say that T, we can say that should extend with user props.

[00:04:29] We talked about this last example, but we didn't necessarily do extends plural. And what this will do is now with current user, we'll only take components that originally took a user prop, right? So, listen, it's gonna be a generic type. Our only rule is that generic type has to be in a type that had a user property on it.

[00:04:50] Right so we can, we this is now even safer, which is you can't pass things into with current user that didn't take a user property at all, which again, is really useful if one making a component library. 2, If you are, I joke that even if you're not making a library for other people to consume in a large enough codebase, you kind of are.

[00:05:12] Right, pieces of your code will be consumed in other parts of the application. And so being able to like express the intent of that code is an incredibly powerful idea, as well. Right and we have it in place.