React 3

 

Chapter 3 — Props (Making Components Dynamic)

🎯 Goal

Learn how to send data from one component to another so you can reuse the same component with different content.

---

First, one new idea (2 minutes)

Imagine a coffee shop.

There is one coffee machine (the component).

Customers place different orders:

• Coffee → Latte

• Coffee → Cappuccino

• Coffee → Espresso

The machine is the same. Only the order changes.

Props work exactly like that.

Without props:

<Button />
<Button />
<Button />

All three buttons look exactly the same.

With props:

<Button text="Save" />
<Button text="Delete" />
<Button text="Cancel" />

Same component.
Different data.

---

New Syntax

Passing a prop

<Button text="Save" />

Here,

• text → prop name

• "Save" → value

---

Receiving a prop

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

New Syntax Explained

You'll see curly braces {} inside JSX.

<button>{props.text}</button>

Think of it like saying:

"Insert the value of props.text here."

If props.text is "Save":

<button>Save</button>

---

MCQs

Q1

What is the main purpose of props?

(A) To style components

(B) To send data from one component to another

(C) To install packages

(D) To create folders

---

✅ Answer: (B)

Mini Explanation

Props allow a parent component to send data to a child component.

---

Q2

Which code passes a prop?

(A)

<Button />

(B)

<Button text="Save" />

(C)

Button("Save")

(D)

<Button = "Save" />

---

✅ Answer: (B)

Mini Explanation

Props are written like HTML attributes.

---

Q3

What will this display?

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

export default function Home() {
  return <Button text="Save" />;
}

(A) Button

(B) Save

(C) props.text

(D) Error

---

✅ Answer: (B)

Mini Explanation

props.text contains "Save".

---

Q4

Predict the output.

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

export default function Home() {
  return (
    <>
      <Button text="Save" />
      <Button text="Delete" />
    </>
  );
}

(A) Save Delete

(B) Save Save

(C) Delete Delete

(D) Error

---

✅ Answer: (A)

Mini Explanation

Each component receives its own prop value.

---

Q5

Find the bug.

function Button(props) {
  return <button>{props.title}</button>;
}

export default function Home() {
  return <Button text="Save" />;
}

(A) No bug

(B) Should use props.text

(C) Missing export

(D) Missing return

---

✅ Answer: (B)

Mini Explanation

You passed text but tried to read title.

The names must match.

---

Q6

Which code is correct?

(A)

<Button text="Login" />

(B)

<Button("Login") />

(C)

<Button text=Login />

(D)

<Button:Login />

---

✅ Answer: (A)

Mini Explanation

String values go inside quotes.

---

Q7

What will appear?

function Card(props) {
  return <h2>{props.title}</h2>;
}

export default function Home() {
  return <Card title="React" />;
}

(A) React

(B) title

(C) Card

(D) Error

---

✅ Answer: (A)

---

Q8

Find the bug.

function Card(props) {
  return <h2>{props.name}</h2>;
}

export default function Home() {
  return <Card title="Next.js" />;
}

(A) Should use props.title

(B) Missing button

(C) Missing export

(D) No bug

---

✅ Answer: (A)

Mini Explanation

The prop name is title, not name.

---

Q9

Predict the output.

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

export default function Home() {
  return <Welcome name="Pramod" />;
}

(A) Hello

(B) Hello Pramod

(C) Pramod

(D) Error

---

✅ Answer: (B)

---

Q10

What happens here?

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

export default function Home() {
  return <Welcome />;
}

(A) Hello

(B) Hello undefined

(C) Error

(D) Blank page

---

✅ Answer: (B)

Mini Explanation

No name prop was passed.

So props.name is undefined.

---

Q11

Which code is better?

Option A

<h2>Apple</h2>
<h2>Banana</h2>
<h2>Mango</h2>

Option B

<Fruit name="Apple" />
<Fruit name="Banana" />
<Fruit name="Mango" />

(A) Option A

(B) Option B

(C) Both

(D) Neither

---

✅ Answer: (B)

Mini Explanation

Reusable components reduce repeated code.

---

Q12

Predict the output.

function Price(props) {
  return <p>${props.value}</p>;
}

export default function Home() {
  return (
    <>
      <Price value="100" />
      <Price value="250" />
    </>
  );
}

(A) $100 $250

(B) $100 $100

(C) $250 $250

(D) Error

---

✅ Answer: (A)

---

Q13

Which statement is true?

(A) Props make components reusable.

(B) Props can only contain text.

(C) Props work only in Next.js pages.

(D) Props are used for CSS.

---

✅ Answer: (A)

Mini Explanation

Props let one component display different data.

---

Q14

Find the bug.

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

export default function Home() {
  return <Button Text="Save" />;
}

(A) No bug

(B) Should pass text, not Text

(C) Missing return

(D) Missing export

---

✅ Answer: (B)

Mini Explanation

Prop names are case-sensitive.

text and Text are different.

---

Q15

Predict the output.

function Book(props) {
  return <h2>{props.title}</h2>;
}

export default function Home() {
  return (
    <>
      <Book title="Atomic Habits" />
      <Book title="Deep Work" />
      <Book title="Clean Code" />
    </>
  );
}

(A) One book

(B) Three book titles

(C) Error

(D) Blank page

---

✅ Answer: (B)

---

Q16

Which is more reusable?

(A)

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

(B)

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

(C) Both are equally reusable.

(D) Neither

---

✅ Answer: (B)

Mini Explanation

The second component can display Save, Delete, Cancel, or anything else.

---

Q17

What will this display?

function User(props) {
  return <h2>{props.name}</h2>;
}

export default function Home() {
  return (
    <>
      <User name="Amit" />
      <User name="Sara" />
    </>
  );
}

(A) Amit Sara

(B) Sara Amit

(C) Amit Amit

(D) Error

---

✅ Answer: (A)

---

Q18 (Hard)

You're building an online store.

Which approach is better?

(A) Create a different ProductCard component for every product.

(B) Create one ProductCard component and pass different props like name, price, and image.

(C) Copy and paste the HTML for every product.

(D) Create one page per product with repeated code.

---

✅ Answer: (B)

Mini Explanation

Real-world apps reuse the same component with different props. This keeps your code clean and easy to update.

---

⭐ Chapter Summary (The 20% You'll Use Every Day)

Remember these four patterns:

1. Pass data

<Button text="Save" />

---

2. Receive data

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

---

3. Use {} to display JavaScript values

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

---

4. Prop names must match exactly

✅ Correct:

<Button text="Save" />

props.text

❌ Wrong:

<Button Text="Save" />

props.text

---

🎯 Mini Coding Challenge

Create a reusable ProductCard component.

Requirements:

• Accept these props:

  • name

  • price

Example:

<ProductCard name="iPhone 16" price="$999" />
<ProductCard name="MacBook Air" price="$1199" />
<ProductCard name="AirPods Pro" price="$249" />

Expected output:

iPhone 16
$999

MacBook Air
$1199

AirPods Pro
$249

---

🚀 Mini Real-World Project

Restaurant Menu

Build a simple restaurant menu using one reusable component.

Create a MenuItem component that accepts:

• name

• price

Use it like this:

<MenuItem name="Veg Burger" price="$5" />
<MenuItem name="Pizza" price="$12" />
<MenuItem name="Pasta" price="$10" />
<MenuItem name="Cold Coffee" price="$4" />

Rule: Don't create four different components. Build one reusable component and pass different props.

---

💡 Tiny Improvement for Future Chapters

From the next chapter onward, I'll also include "Interview Trap" questions—common mistakes that even junior developers make in real React/Next.js interviews (for example, confusing props with state, incorrect JSX syntax, or subtle rendering bugs). These are the kinds of questions that help you become job-ready, not just tutorial-ready.

Reply "ok" when you've finished this chapter, and we'll move on to Chapter 4: Rendering Lists with map(), where you'll learn one of the most frequently used patterns in production Next.js applications.