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.