children as ReactNode, a footer slot, and ComponentProps<typeof Card>
Every child here is a valid ReactNode: text, a number, an element, an array of strings, null and false (from loggedIn && ...). null, false and undefined render nothing. NoteCard takes exactly Card's props because ComponentProps<typeof Card> reads them from the component itself; change CardProps and NoteCard follows.
Describe a component's props with a type or interface: optional props with ?, unions of string literals for variants, ReactNode for anything renderable, and ComponentProps<"button"> to accept every native prop of an HTML element.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Write an Alert component with tone: "info" | "error" (required), an optional title?: string, and children. Render one of each tone.
Write a TextField that accepts every native <input> prop plus a required label: string, and renders a <label> wrapping the text and the input.
Explain it without notes
When would you choose type and when interface for props?
What is ReactNode, and why is it usually better than JSX.Element for children?
How do you build a Button that accepts all native <button> props plus a variant? What about ref in React 19?
What goes wrong when your prop has the same name as a native prop, and how do you fix it?
Preview
Console
Nothing logged yet.Expected console output
Text -> [Plain text]
Number -> [42]
Element -> [Bold words]
Array -> [one two three]
Nothing -> []
Note: Wrapped -> [Same props, new title]