Differentiating Props With a Boolean Discriminator
In this exercise, we are working with an EmbeddedPlayground component. This component allows us to use either Code Sandbox or StackBlitz, both of which are services that provide embedded playgrounds:
const EmbeddedPlayground = (props: EmbeddedPlaygroundProps) => {
if (props.us
Transcript
00:00 In this exercise, we have an embedded playground component, and that component can either be used to use Code Sandbox or use StackBlitz, which are two services that offer embedded playgrounds. We're using an iframe inside here, and in the iframe, we're basically using the SRC to either go to StackBlitz if we use StackBlitz,
00:19 or go to Code Sandbox by default. So there's an interesting behavior here. We're using a default, and we're also kind of using a Boolean as the differentiator. So, but our props here are really messy. We have StackBlitz ID, which can always be passed or not passed, or Code Sandbox ID,
00:38 which can be passed or not passed, meaning that we can end up in some really nasty situations. This should be an error here, because we're using StackBlitz, but passing a Code Sandbox ID. And here, we're passing a StackBlitz ID, even though the default is Code Sandbox. So your job here is to try to figure out a way
00:58 where we can say, when useStackBlitz is false or undefined, we want to use Code Sandbox. And when useStackBlitz is true, we want to use a StackBlitz ID, or we want to receive a StackBlitz ID. So it's kind of like a discriminated union, but with Booleans.
01:16 Good luck.
