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
}

Need a 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

Need a 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'));

Need a 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'));

Need a hint?

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