Props destructuring in React - Mini Project: Build & Apply

Props Destructuring in React

📖 Scenario: You are building a simple React app that shows a user's profile information. The profile data is passed as props to a component.

🎯 Goal: Learn how to use props destructuring in a React functional component to access and display user information.

📋 What You'll Learn

Create a functional component named UserProfile that receives props

Destructure the props object to extract name, age, and location

Render the user information inside semantic HTML elements

Use functional component patterns

💡 Why This Matters

🌍 Real World

Destructuring props is a common pattern in React apps to write cleaner and more readable components that receive data.

💼 Career

React developers frequently use props destructuring to simplify component code and improve maintainability in real projects.

1

Create the UserProfile component with props

Create a React functional component called UserProfile that takes a single parameter called props. Inside the component, return a div with the text User Profile.

React

function UserProfile(props) {
  // Your code here
}

Hint

Start by defining a function named UserProfile that accepts props and returns a simple div.

2

Add a user object as props

Add a constant user object with keys name, age, and location and values 'Alice', 30, and 'New York' respectively. Then render the UserProfile component passing the user object as props.

React

function UserProfile(props) {
  return User Profile;
}

// Your code here

Hint

Create a user object with the exact keys and values, then pass it to UserProfile using spread syntax.

3

Destructure props inside UserProfile

Inside the UserProfile component, use destructuring to extract name, age, and location from props. Then update the returned JSX to display the user's name in an h2, age in a p, and location in another p.

React

function UserProfile(props) {
  // Destructure name, age, location from props
  // Your code here

  return (
    
      {/* Display user info here */}
    
  );
}

const user = { name: 'Alice', age: 30, location: 'New York' };

ReactDOM.render(, document.getElementById('root'));

Hint

Use const { name, age, location } = props; to get the values, then use JSX to show them.

4

Use destructuring in the function parameter

Refactor the UserProfile component to destructure name, age, and location directly in the function parameter instead of inside the function body.

React

// Refactor UserProfile to destructure props in the parameter
function UserProfile({ name, age, location }) {
  return (
    
      {name}
      Age: {age}
      Location: {location}
    
  );
}

const user = { name: 'Alice', age: 30, location: 'New York' };

ReactDOM.render(, document.getElementById('root'));

Hint

Change the function parameter from props to { name, age, location }.

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