Components 7 exercises

Use a Type Helper to Extract Component Props

The solution actually uses something that we've used before.

First, let's import ComponentProps from React:

import { ComponentProps } from "react";

There are two ways to use ComponentProps. You can pass it an actual HTML DOM element, or you can pass it an existing component

Loading solution


0:00 The solution here is actually using something that we've used before. I'm going to grab ComponentProps again from React. Let me just pull this so it's in with all my other imports nice and neat.

0:12 ComponentProps actually has two modes. You can either pass it like one of these things here, big. Big? I've not actually heard of that one before. Animate, animateMotion, all of these actual HTML DOM elements. Or what you can do is you can pass it an existing component. I can say ComponentProps typeof NavBar, and that will extract out all of the props from this NavBar itself.

0:41 If I command-click on it, I can actually go in. This is a complicated type definition, so bear with me. We have either key of JSX.IntrinsicElements, which is a div, span, all that stuff, or a JSXElementConstructor. A JSXElementConstructor is going to be a function that returns some JSX or a class that returns some JSX.

1:05 This is super cool. It means that NavBarProps is now typed as title, links, children. Beautiful.