Components 7 exercises

Extracting Props from Custom Components

Imagine that NavBar is a component that comes from an external library:

// Imagine NavBar is an external library!
export const NavBar = (props: {
title: string;
links: string[];
children: React.ReactNode;
}) => {
return <div>Some content</div>;

For whatever reason,

Loading exercise


0:00 Let's say that we have a component that comes in from an external library, this NavBar up here. It's in an external library. For whatever reason, they haven't pulled out these props into something that they've exported. These props aren't something that you can just import into your application and reuse as a reusable type.

0:19 We need to find some way where we can take the props of NavBar and pull them into a type. Let's say we want to use it in some other component's type. This is a really, really common situation. Some libraries just don't export the props that come with their components. So annoying. We needed to find a way around this.

0:39 There is a way you can do this where you would take in NavBar. Imagine we're just importing the components of NavBar. We need to do something to it, perhaps using a reusable type helper from React, and then grab the props from it. That's your job, is to try and find out all of the little pieces that we'll need to solve this puzzle. Good luck.