Advanced Props 12 exercises

Destructuring Discriminated Unions in React Props

In this exercise, we're starting with the same Modal component that has the variants all lined up in a discriminated union:

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

However, this time the component has changed

Loading exercise


00:00 In this exercise, we're starting with our modal components again. In exactly the same setup, we have our modal props with the variants all lined up in the discriminated union, except we've got an error down here. And that's because we've changed it from using just props into doing some destructuring here.

00:17 So we have our variant being destructured and our title being destructured. Variant seems to be fine, like it's no title or title, lovely. But title doesn't seem to exist on type modal props.

00:30 Your job here is to try to find a way to fix the error and try to work around this little bit of pain here. Let's imagine that we still want to destructure the props, but we might not be able to do it quite here.

00:44 So your job is to try and fix this. Good luck.