Props destructuring in React

Introduction

Props destructuring helps you easily access values passed to a React component. It makes your code cleaner and simpler to read.

When you want to use specific values from props without repeating 'props.' every time.

When you want to make your component code shorter and clearer.

When you want to quickly see which props a component expects.

When you want to avoid mistakes by clearly naming the props you use.

Syntax

React

function ComponentName({ prop1, prop2 }) {
  // use prop1 and prop2 directly
}

You write curly braces { } inside the function parameter to pick out props by name.

This works only for functional components in React.

Examples

This component takes a name prop and uses it directly.

React

function Greeting({ name }) {
  return <h1>Hello, {name}!</h1>;
}

Destructures two props to show full name.

React

function UserInfo({ firstName, lastName }) {
  return <p>{firstName} {lastName}</p>;
}

Arrow function component using destructuring for label and onClick props.

React

const Button = ({ label, onClick }) => {
  return <button onClick={onClick}>{label}</button>;
};

Sample Program

This React app shows how to destructure user and age props inside the WelcomeMessage component. It displays a welcome message with the user's name and age.

React

import React from 'react';

function WelcomeMessage({ user, age }) {
  return (
    <div>
      <h2>Welcome, {user}!</h2>
      <p>Your age is {age}.</p>
    </div>
  );
}

export default function App() {
  return <WelcomeMessage user="Alice" age={30} />;
}

Important Notes

If you forget to destructure, you can still use props like props.user, but destructuring is cleaner.

You can also destructure props inside the function body if you prefer.

Destructuring helps with readability and reduces repeated code.

Summary

Props destructuring lets you pick specific props directly in the function parameters.

It makes your React components easier to read and write.

Use it whenever you want cleaner and clearer access to props.