Components 7 exercises

Using HTML Props in React Components

In this exercise, we're back with our old friend the Button.

But this time the requirements are slightly different.

We want this Button to behave like a normal HTML button.

Things like onClick and type="button" should be available and support auto-complete:

export const But

Loading exercise


0:00 In this exercise, we're back with our old friend, the Button. Here, the requirements are slightly different, though. We want to have this button just behave in the prop sense like a normal HTML button. We want things like OnClick and button or type Button here to be available and auto-completable.

0:18 Currently, when we auto-complete on this button, even though we're passing all of the props into this rest thing here, it's not really working. It's not giving us the auto-complete there. Also, we want to extract our className, for instance, and have that as something that we append extra classes to but pass a default class name. That's why this component even exists, so that we can have that behavior.

0:44 Your job here is to figure out how to extract all of the property types from this button component or from the native one, and then use that to type our button itself. This is a little bit tricky, but there is a React type helper that is going to help you out.

1:03 There's two ways of doing it, either with the type helper or just by wrangling the types manually. I'll give you a link that will help you below. Good luck.