Lesson 9 — Props in React (Passing Data Between Components)

Introduction 😊

So far, you have learned about:

• JSX
• Components (Function vs Class)

Now it’s time to understand how components communicate with each other.

In React, this communication happens using Props.

In this lesson, you will learn:

• What props are in React
• Why props are used
• How to pass props
• Props with examples
• Important rules of props

Let’s start 🚀

What Are Props in React? 🤔

Props stands for Properties.

Props are used to pass data from one component to another.

👉 In simple words:

Props are like arguments passed to a function.

Why Props Are Important 🧠

React applications are made of multiple components.
Each component often needs data from its parent component.

Props help you:

• Make components reusable ♻️
• Keep components dynamic
• Separate data and UI

Basic Example of Props 📌

Parent Component (App.js)

function App() {
  return <Welcome name="Avni" />;
}

Child Component (Welcome.js)

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

export default Welcome;

📌 Output:

Hello, Avni

👉 Here, name is a prop.

Props Are Read-Only ⚠️

Props cannot be changed inside the child component.

❌ Incorrect:

props.name = "Palak";

✅ Correct:

<h1>Hello, {props.name}</h1>

👉 Props are immutable (read-only).

Passing Multiple Props 🔄

You can pass more than one prop.

Parent Component

<Student name="Avni" age={9} city="Delhi" />

Child Component

function Student(props) {
  return (
    <p>
      Name: {props.name}, Age: {props.age}, City: {props.city}
    </p>
  );
}

Props Using Destructuring ✂️ (Recommended)

Destructuring makes code cleaner and readable.

function Student({ name, age, city }) {
  return (
    <p>
      Name: {name}, Age: {age}, City: {city}
    </p>
  );
}

👉 This is the recommended way.

Props in Reusable Components ♻️

Example: Button component

function Button({ text }) {
  return <button>{text}</button>;
}

Usage:

<Button text="Login" />
<Button text="Register" />

👉 Same component, different data.

Default Props 🧩

Default props are used when no value is passed.

function Greeting({ name = "Guest" }) {
  return <h2>Hello, {name}</h2>;
}

Usage:

<Greeting />

Output:

Hello, Guest

Props vs State (Quick Difference) ⚖️

👉 We’ll learn State in the next lesson.

Common Mistakes Beginners Make ❌

• Trying to modify props
• Forgetting to pass props
• Misspelling prop names
• Not using destructuring

💡 Practice helps avoid these mistakes quickly.

Conclusion 🎯

Props are one of the core concepts of React.

Key takeaways:

• Props are used to pass data between components
• Props are read-only
• Props make components reusable
• Destructuring props is recommended
• Props help build dynamic UIs

👉 If components are building blocks, props are the connectors 🔗

Frequently Asked Questions (FAQs) ❓

Can we change props in React?

No. Props are read-only.

Can props be passed from child to parent?

No. Props flow only from parent to child.

Can props pass functions?

Yes. Functions can be passed as props.

What’s Next? 🚀

👉 In the next lesson, we will learn:

Lesson 10 — State in React
Understanding how components manage and update data.