Props destructuring in React - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to destructure the name prop from props.

React

function Greeting(props) {
  const { [1] } = props;
  return <h1>Hello, {name}!</h1>;
}

Drag options to blanks, or click blank then click option'

Aname

Bage

Ctitle

Dmessage

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting to use curly braces for destructuring.

Trying to destructure a prop that doesn't exist.

We use curly braces to extract the name property from props so we can use it directly.

2fill in blank

medium

Complete the code to destructure title and author props from props.

React

function Book(props) {
  const { [1] } = props;
  return <p>{title} by {author}</p>;
}

Drag options to blanks, or click blank then click option'

Atitle, author

Btitle author

Ctitle; author

Dtitle: author

Attempts:

3 left

💡 Hint

Common Mistakes

Using spaces or semicolons instead of commas between prop names.

Not separating the props correctly causes syntax errors.

When destructuring multiple props, separate them with commas inside the curly braces.

3fill in blank

hard

Fix the error in destructuring props to get color.

React

function Button([1]) {
  return <button style={{ backgroundColor: color }}>Click me</button>;
}

Drag options to blanks, or click blank then click option'

Acolor

B{color}

Cprops.color

Dprops

Attempts:

3 left

💡 Hint

Common Mistakes

Using dot notation inside the parameter list.

Not using curly braces causes syntax errors.

To destructure props directly in the function parameter, wrap the prop names in curly braces.

4fill in blank

hard

Fill both blanks to destructure firstName and lastName from props.

React

function UserProfile(props) {
  const [1] = [2];
  return <p>{firstName} {lastName}</p>;
}

Drag options to blanks, or click blank then click option'

A{ firstName, lastName }

Bprops

Cprops.firstName, props.lastName

D[firstName, lastName]

Attempts:

3 left

💡 Hint

Common Mistakes

Using array brackets instead of curly braces for destructuring.

Trying to destructure from individual props instead of the whole object.

We destructure firstName and lastName from props using curly braces and assign them from props.

5fill in blank

hard

Fill the blank to destructure title, year, and rating from props.

React

function MovieCard([1]) {
  return <div>
    <h2>{title}</h2>
    <p>Year: {year}</p>
    <p>Rating: {rating}</p>
  </div>;
}

Drag options to blanks, or click blank then click option'

Atitle

Byear

C{ title, year, rating }

Drating

Attempts:

3 left

💡 Hint

Common Mistakes

Listing props without curly braces in the parameter.

Trying to destructure props one by one instead of all at once.

Destructuring multiple props directly in the parameter requires curly braces with all prop names inside.

Practice

1. What does props destructuring in a React functional component do?

easy

A. It creates a new component with different props.

B. It extracts specific properties from the props object directly in the function parameters.

C. It changes the state of the component automatically.

D. It prevents the component from receiving props.

Solution

1. Step 1: Understand props in React

   Props are passed as an object to components, containing all passed data.

2. Step 2: What destructuring does

   Destructuring extracts specific keys from the props object directly in the function parameters for easier access.

3. Final Answer:

   It extracts specific properties from the props object directly in the function parameters. -> Option B

4. Quick Check:

   Props destructuring = extracting keys [OK]

Hint: Destructuring picks props by name inside function parentheses [OK]

Common Mistakes:

• Thinking destructuring changes state
• Confusing destructuring with creating new components
• Believing destructuring blocks props

2. Which of the following is the correct syntax to destructure props name and age in a React functional component?

easy

A. function User({name, age}) { return {name} is {age}; }

B. function User(props) { const name = props.name; const age = props.age; return {name} is {age}; }

C. function User(name, age) { return {name} is {age}; }

D. function User(props) { return {props.name, props.age}; }

Solution

1. Step 1: Identify destructuring in parameters

   Destructuring happens inside the function parentheses by listing keys in curly braces.

2. Step 2: Check each option

   function User({name, age}) { return <p>{name} is {age}</p>; } correctly destructures name and age directly in the parameters.

3. Final Answer:

   function User({name, age}) { return <p>{name} is {age}</p>; } -> Option A

4. Quick Check:

   Destructuring in parameters = function User({name, age}) { return

   {name} is {age}

   ; } [OK]

Hint: Destructure props inside parentheses with curly braces [OK]

Common Mistakes:

• Passing props as separate parameters instead of one object
• Manually extracting individual props instead of destructuring
• Using commas inside JSX expressions incorrectly

3. What will be the rendered output of this component?

function Greeting({ name, city }) {
  return <p>Hello {name} from {city}!</p>;
}

// Usage: <Greeting name="Anna" city="Paris" />

medium

A. Hello Anna from Paris!

B. Hello {name} from {city}!

C. Hello Anna from Paris!

D. Error: props not defined

Solution

1. Step 1: Understand destructuring in parameters

   The component extracts name and city from props directly.

2. Step 2: Render output with given props

   Using name="Anna" and city="Paris", the JSX renders as <p>Hello Anna from Paris!</p>.

3. Final Answer:

   <p>Hello Anna from Paris!</p> -> Option A

4. Quick Check:

   Destructured props render correct text [OK]

Hint: Destructured props show passed values in JSX [OK]

Common Mistakes:

• Expecting literal {name} text instead of value
• Forgetting to pass props when using component
• Confusing JSX tags with plain text

4. Identify the error in this React component using props destructuring:

function Info({ title, description }) {
  return <div>
    <h1>{title}</h1>
    <p>{props.description}</p>
  </div>
}

medium

A. Missing return statement in the function.

B. Destructuring syntax is incorrect in the function parameters.

C. Using props.description inside the component causes an error.

D. JSX tags are not properly closed.

Solution

1. Step 1: Check destructuring usage

   The function destructures title and description from props, so props is not defined inside.

2. Step 2: Identify incorrect usage

   Using props.description causes an error because props is not declared; should use description directly.

3. Final Answer:

   Using props.description inside the component causes an error. -> Option C

4. Quick Check:

   Destructuring means no props object inside function [OK]

Hint: Use destructured names directly, not props.name [OK]

Common Mistakes:

• Using props.property after destructuring
• Thinking destructuring creates a new props object
• Ignoring error messages about undefined variables

5. You want to create a React component that shows a user's firstName, lastName, and age. You receive props as a single object. Which is the best way to use props destructuring to make your code clean and readable?

hard

A. function User(props) { const { firstName, lastName, age } = props; return {firstName} {lastName} is {age} years old.; }

B. function User(firstName, lastName, age) { return {firstName} {lastName} is {age} years old.; }

C. function User() { return {props.firstName} {props.lastName} is {props.age} years old.; }

D. function User({ firstName, lastName, age }) { return {firstName} {lastName} is {age} years old.; }

Solution

1. Step 1: Compare destructuring styles

   function User(props) { const { firstName, lastName, age } = props; return <p>{firstName} {lastName} is {age} years old.</p>; } destructures inside the function body, which works but is less concise.

2. Step 2: Identify best practice

   function User({ firstName, lastName, age }) { return <p>{firstName} {lastName} is {age} years old.</p>; } destructures props directly in the function parameters, making code cleaner and easier to read.

3. Step 3: Check incorrect options

   function User() { return <p>{props.firstName} {props.lastName} is {props.age} years old.</p>; } uses props without declaring it, causing error. function User(firstName, lastName, age) { return <p>{firstName} {lastName} is {age} years old.</p>; } treats props as separate parameters, which is invalid.

4. Final Answer:

   function User({ firstName, lastName, age }) { return <p>{firstName} {lastName} is {age} years old.</p>; } -> Option D

5. Quick Check:

   Destructure props in parameters for clean code [OK]

Hint: Destructure all needed props inside function parentheses [OK]

Common Mistakes:

• Destructuring inside function body instead of parameters
• Using props without declaring it
• Passing props as separate parameters instead of one object