Props destructuring in React - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is props destructuring in React?

Props destructuring is a way to extract specific properties from the props object directly in the function parameters or inside the component, making the code cleaner and easier to read.

beginner

How do you destructure props in a React functional component's parameter?

You can write the component function like this: <code>function MyComponent({ title, subtitle }) { ... }</code> instead of <code>function MyComponent(props) { ... }</code> and then accessing <code>props.title</code> and <code>props.subtitle</code>.

beginner

Why is props destructuring helpful?

It makes the code shorter and clearer by avoiding repeated props. prefixes. It also helps to see which props the component expects at a glance.

intermediate

Show an example of destructuring props inside the component body.

Inside the component, you can write: <code>const { title, subtitle } = props;</code> to extract the props, then use <code>title</code> and <code>subtitle</code> directly.

intermediate

Can you destructure nested props? Give an example.

Yes. For example, if props has a user object: <code>function Profile({ user: { name, age } }) { ... }</code> extracts <code>name</code> and <code>age</code> from <code>user</code> directly.

How do you destructure props in a React functional component parameter?

A function MyComp({ title, subtitle }) { ... }

B function MyComp(props.title, props.subtitle) { ... }

C function MyComp(props) { const title = props.title; }

D function MyComp() { const { title, subtitle } = this.props; }

Option A shows correct destructuring directly in the function parameter.

What is the benefit of destructuring props?

A It makes code longer and harder to read.

B It avoids repeating 'props.' and clarifies expected props.

C It disables prop validation.

D It automatically sets default props.

Destructuring helps by avoiding repeated 'props.' and shows expected props clearly.

Which syntax correctly destructures nested props?

A function Comp(props) { const { user.name, user.age } = props; }

B function Comp({ user.name, user.age }) { ... }

C function Comp({ user: { name, age } }) { ... }

D function Comp(props) { const name = props.user.name; }

Option C shows correct nested destructuring in the parameter.

Where else can you destructure props besides the function parameter?

A You cannot destructure props anywhere else.

B Only in the render method.

C Only in class components.

D Inside the component body using const { } = props;

You can destructure props inside the component body using const assignment.

What happens if you forget to destructure props and use props.title directly?

A You can still access props.title but code is less clean.

B You must destructure props to access any prop.

C The component will not render.

D React throws an error.

You can access props.title directly without destructuring, but destructuring makes code cleaner.

Explain how to use props destructuring in a React functional component and why it is useful.

Think about how you can write function parameters to get props directly.

Describe how to destructure nested props and give a simple example.

Consider a prop like user with name and age 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