Props & Destructuring

How to pass data into components and unpack it cleanly using JavaScript destructuring.

React3 min readConcept 7 of 46

What they are

**Props** (short for properties) are the mechanism for passing data from a parent component down to a child component. They are the React equivalent of HTML attributes.

Every React Functional Component receives exactly one argument: a single JavaScript object containing all the props passed to it. **Destructuring** is a standard JavaScript feature used to unpack properties from that object directly in the function signature.

Why it matters

Props allow you to create dynamic, reusable components. Instead of hardcoding a user's name into a Profile component, you pass the name as a prop, allowing you to reuse the exact same component for hundreds of different users.

Destructuring makes your code significantly cleaner. Instead of typing props.name and props.age repeatedly, you unpack them immediately into name and age variables.

How it works

When a parent renders <Avatar image="/me.png" size={50} />, React bundles those attributes into a single object: { image: '/me.png', size: 50 }.

It then passes that object as the first argument to the Avatar function. You can receive it as function Avatar(props) and use props.image, or you can destructure it immediately: function Avatar({ image, size }).

Reusable Blueprints

Notice how the exact same component is rendered twice, but produces different UI because the parent passed different props.

// 1. Destructure props in the signature.
// 2. Provide a default value for 'size'.
function Avatar({ icon, color, size = 100 }) {
return (
{icon}
);
}
 
// 3. The Parent passes the props:
export default function App() {
return (
<Avatar icon={} color="#34d399" size={60} />
<Avatar icon={} color="#60a5fa" />
);
}
size: 60
size: 100 (default)

Props let you reuse the same component blueprint with different data. Default values handle missing props gracefully.

Check yourself

Pick an answer to lock it in, then read why. Getting one wrong is part of how it sticks.

  1. 1How many arguments does a React Functional Component receive?
  2. 2If a parent renders `<Button label="Submit" />`, what is wrong with this component definition? `function Button(label) { return <button>{label}</button>; }`
  3. 3How can you provide a default value for a prop if the parent doesn't provide one?

Remember this

  • Components receive exactly one argument: the props object.
  • Use { destructuring } to cleanly unpack props in the function signature.
  • Don't forget the curly braces in your function parameters, or you will accidentally capture the entire object instead of the property.
  • You can assign default values directly in the destructuring signature.

Done with this concept?

Mark it complete to track your progress. No login needed.