Using Higher Order Components with Generic Components
We're starting here with the finished withRouter Higher Order Component from the previous exercise:
export const withRouter = <TProps>(Component: React.ComponentType<TProps>) => {
const NewComponent = (props: Omit<TProps, "router">) => {
const router = useRouter();
return <Comp
Transcript
00:00 We're starting here with the finishing point from the previous exercise, which is we have our WithRooter function, except I'm testing it in a different way now, and it's falling apart. The way it's falling apart is with generic components. Our WithRooter function is not ready for generic components. We have our Table function here,
00:19 and this Table function is basically being wrapped with WithRooter here, and we've seen this Table component a bunch of times in this section actually. This wrapped Table then is not actually a generic component anymore. This one is, this Table was, but it's actually erroring because Rooter is required.
00:38 But this one, we're passing in 1, 2, 3, and the row is inferred as unknown instead of number. So this is happening for the same reason as we saw in ForwardRef. So your job is to try to work out how we can change the type of this in order to get it to work.
00:57 We will need to add some more annotations here. We will definitely need to change this React.ComponentType annotation. I don't think we need to add any more generics, but yeah, and we're going to have some stuff to figure out with this DisplayName too, because you remember the thing that was making it break before
01:14 was the fact that DisplayName and default props and things were included on the function, and it meant that it stripped away the generosity of it. I've kind of made that word up, but I quite like it. It sounds like generosity somehow. But yeah, that's your job, is to try to figure out the type signature of this to make it work with generic components. Good luck.
