0:00 In this exercise, we're going to look at a really common pattern, which is you have a component props, let's say, you're using inputs here, and you want to change one of the native interfaces here. Let's say you have onChange, which by default, you get an entire event object here. You get a change event.

0:19 It has things like E.default prevented, event phase, all this guff on there. You don't really want that. For your example, what you want is you just want to pass in the new value here. This is quite a common thing. You tend to want to change some of the native elements or change some of their APIs to make it easier to use.

0:39 This all looks good. You're basically saying component props input and onChange value string void. Everything looks good inside the components. When you go to use it, it doesn't behave like you expect. You have this input here, which is your lovely components. You've got your onChange, which you're passing it.

0:56 It's not working as you'd expect. This E here, instead of being string, it's string or React ChangeEvent. Something's going wrong here. it looks like onChange, it's a combination of the base type, change event handler, and the one that you proposed. In other words, that this little bit here isn't actually overriding or removing the prop from component props input.

1:25 Your job is to work out a way where you can remove the onChange prop from here and pass in a new onChange prop. There are several solutions to this. One includes a reusable type helper. See if you can hack a part of it together. This will also involve definitely one of TypeScript's utility types, which I'll link below if you want a hint. Good luck.