The `as` Prop with Custom Components
Here's where we left off with the Wrapper component from the previous exercise:
export const Wrapper = <TAs extends keyof JSX.IntrinsicElements>(
props: {
as: TAs;
} & React.ComponentProps<TAs>,
) => {
const Comp = props.as as string;
return <Comp {...(props as any)}></
Transcript
00:00 Let's try extending our as prop a little bit further. We've got the same setup as the previous exercise, but now we've got an extra test. And that extra test is this one here where we're passing in a custom component into as and expecting it to inherit from the props that we pass in.
00:19 This is a common requirement for as that you should be able to just pass in anything you want and it should just inherit all of these props. So when we pass in as custom, we're expecting this is required to be required. So this is a more complicated solution, but it really just uses the same building blocks
00:38 that we had before. We've already got our type argument from last time. And this solution kind of expands on that with a couple of different other elements here. So we've still got our generic stuff here. No need to change any of that. I want you to investigate element type, which we have introduced before. And I want you to take a look
00:58 at these three different helpers here. And this is where I got my solution for this problem from. It's not the easiest thing in the world to find because you'll start to notice that some of the tools here in React types fall down a little bit, but there's still certainly some that can be useful. Anyway, I think I've given you enough clues. This should be enough for you
01:17 to sort of muddy your way through to a solution and see if before you check out the solution, see if you can work out why it works as well as how it works. Good luck.
