React Props

In the last lesson you learned about Organizing React Components. Now let’s fix a reuse problem: props let one component show different data each time you use it.

🤔 Why do we need props?

Think about a component that greets a user. Without props, every copy of it is frozen with the same text.

• You build a Greeting component that says “Hello, Alex”.
• You use it for Riya. It still says “Hello, Alex”. Wrong person.
• You could copy the component and hard-code “Hello, Riya”. But now you have two near-identical components to maintain.
• That defeats the whole point of reuse. Real apps have thousands of users, you can’t make a component for each one.

This is the pain. Reuse only saves you if each copy can show its own data. That’s exactly what props give you.

A quick look at a YouTube page makes it obvious. Every video card has the same shape but different data.

// The SAME VideoCard component, three different videos
<VideoCard title="React in 100 Seconds" channel="Fireship" />
<VideoCard title="Learn CSS Grid" channel="freeCodeCamp" />
<VideoCard title="Cooking Pasta" channel="Tasty" />

One component, three different results. That is props doing the work.

🧩 What are props?

Props is short for “properties”. A prop is a piece of data that a parent component passes down to a child.

• Props are how components talk to each other. The parent sends, the child receives.
• You pass them like HTML attributes: <Greeting name="Alex" />.
• Inside the child, all the props arrive together in one object, usually called props.
• So name="Alex" becomes props.name inside the child. Simple as that.

Here is the smallest possible example. The parent sends a name, and the child reads it.

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

// Parent component
function App() {
  return <Greeting name="Alex" />;
}

So when this runs, the screen shows “Hello, Alex!”. Change the parent to name="Riya" and it shows “Hello, Riya!”. Same component, different data.

Hello, Alex!

⬇️ Data flows parent to child

There’s one direction rule you need to remember. Data in React flows down, from parent to child. This is called one-way data flow.

• The parent decides what data to send. It “owns” that data.
• The child just receives it and shows it. The child can’t send data back up through props.
• Data always moves down the tree, never up. Like water flowing down, not up.

This diagram shows the direction clearly.

Why does one direction matter?

• It makes apps predictable. If something on screen is wrong, you know to look at the parent that sent the data.
• You don’t have to hunt in ten places for where a value got changed. There’s only one source.

📥 How the child receives props

The parent passes props that look like attributes. The child gets them all bundled into a single object.

• Whatever you write as an attribute becomes a key on the props object.
• <UserCard name="Priya" age={25} /> arrives as props.name and props.age.
• Text values use quotes: name="Priya". Anything else like numbers, true/false, or variables uses curly braces: age={25}.

Here a parent sends two props, and the child reads both from the props object.

// Child reads from the props object
function UserCard(props) {
  return (
    <div>
      <h2>{props.name}</h2>
      <p>Age: {props.age}</p>
    </div>
  );
}

// Parent passes the props
function App() {
  return <UserCard name="Priya" age={25} />;
}

🔒 Props are read-only

Here’s a rule that trips up a lot of beginners. A child must never change its own props. Props are read-only.

• The child can read props and show them. That’s all.
• The child cannot reassign them. The data belongs to the parent, not the child.
• If a child could secretly change props, one-way data flow would break and bugs would be very hard to find.

This shows the mistake and the correct mindset.

function Greeting(props) {
  // ❌ Wrong - never change a prop
  props.name = "Someone else";

  // ✅ Right - just read and display it
  return <h1>Hello, {props.name}!</h1>;
}

✨ Destructuring props

Writing props.name, props.age, props.email again and again gets repetitive. JavaScript gives us a cleaner way called destructuring.

• Destructuring pulls values straight out of the props object into plain variables.
• You do it right in the function’s parentheses: function UserCard({ name, age }).
• Now you write name instead of props.name. Shorter and easier to read.
• This is the standard style in modern React, so you’ll see it everywhere.

Here is the same UserCard from before, but destructured. Notice there’s no props. anymore.

// Destructure name and age right in the parameters
function UserCard({ name, age }) {
  return (
    <div>
      <h2>{name}</h2>
      <p>Age: {age}</p>
    </div>
  );
}

function App() {
  return <UserCard name="Priya" age={25} />;
}

Both versions do exactly the same thing. Destructuring is just a tidier way to write it.

🧩 What You’ve Learned

• ✅ Props let one reusable component show different data each time you use it
• ✅ Props pass data from a parent component down to a child component
• ✅ React uses one-way data flow, so data always moves parent to child, never up
• ✅ The child receives all props bundled in a single props object
• ✅ Use quotes for text values and curly braces for numbers, booleans, and variables
• ✅ Props are read-only, so a child must never change its own props
• ✅ Destructuring lets you pull props into clean variables and skip the props. prefix

🚀 What’s Next?

Now you know what props are and why they matter. Next you’ll get hands-on and pass many kinds of data, like numbers, objects, and even functions, from parent to child.

React Passing Data with Props