codex-lv3-may-2025

Kata 2: Welcome Component with Props

Concept: Props and destructuring

Challenge

Create a Welcome component that accepts a name prop and displays “Welcome, [name]!” in an <h2> tag.

Use destructuring to extract the name prop.

🔗 Practice on CodeSandbox

Expected Usage

<Welcome name="Ash" />
// Should display: Welcome, Ash!

<Welcome name="Misty" />
// Should display: Welcome, Misty!

Starter Code

export default function Welcome(/* add props here */) {
  // Your code here
}

Solution

Click to reveal solution

export default function Welcome({ name }) {
  return <h2>Welcome, {name}!</h2>;
}

Concept Review

• Props are data passed from parent to child component
• Use { name } to destructure props (modern React pattern)
• Use curly braces {} to embed JavaScript in JSX

---

← Back to Kata Index