Advanced Props 12 exercises

Adding a Prop Required Across Discriminated Union Variants

We're dealing with a modal which has two variants: one with a title and one without a title. The current ModalProps type is defined as follows:

type ModalProps =
| {
variant: "no-title"
| {
variant: "title"
title: string

Now, we want to add a `

Loading exercise


00:00 In this exercise, we're going back to our modal. And this time, in either variant, we want to be able to pass in a button color prop. And that's going to be put on this button here as the background color. So in the no title variant, there's one, and in the title variant, there's one. And this is going to be a required prop.

00:19 You're always going to have to pass this in. So now it's kind of currently erroring because it's not on the props type at all. So your job is to try to figure out a way to type these modal props so that button color is included on either variant. Of course, you could do this, right? But this is way too much like hard work, especially if you've got lots and lots of variants

00:38 or lots and lots of props to add here. So your job is to find a way to type this so that you can attach it to each variant.

00:47 Good luck.