React Props Explained with Greeting Component Example

📌 INTRODUCTION

In React, props (short for properties) are used to pass data from one component to another.

They are:

• Read-only
• Used for communication between components
• Essential for building reusable UI

👉 In this program, we will create a Greeting Component using props.

---

📘 PROBLEM STATEMENT

👉 Create a React component that takes a name prop and displays a greeting message.

---

💡 CONCEPTS USED

• React Props
• Functional Components
• Component Reusability
• JSX

---

🧠 LOGIC EXPLANATION

1. Create a component
2. Pass data using props
3. Access props inside component
4. Display dynamic message

---

💻 PROGRAM CODE

Step 1: Create Greeting Component

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

export default Greeting;

---

Step 2: Use Component in App.js

import Greeting from "./Greeting";

function App() {
  return (
    <div>
      <h1>Welcome App</h1>

      <Greeting name="Kanchan" />
      <Greeting name="Amit" />
      <Greeting name="Riya" />
    </div>
  );
}

export default App;

---

🖥️ OUTPUT

Welcome App
Hello, Kanchan!
Hello, Amit!
Hello, Riya!

---

🔍 STEP-BY-STEP EXPLANATION

• <Greeting name="Kanchan" /> → passing data
• props.name → accessing data
• Same component reused multiple times
• Output changes dynamically

---

⚡ MODERN WAY (DESTRUCTURING PROPS)

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

👉 Cleaner and widely used approach.

---

🎯 WHY PROPS ARE IMPORTANT

• Enable component communication
• Make components reusable
• Help build scalable applications
• Core concept in React

---

🌟 ADVANCED EXAMPLES

1. Multiple Props

<Greeting name="Kanchan" course="MCA" />

function Greeting({ name, course }) {
  return <h2>Hello {name}, Course: {course}</h2>;
}

---

2. Default Props

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

---

📚 REAL-WORLD USE CASE

• Passing data to components
• Displaying user information
• Building reusable UI components
• Handling dynamic content

---

❓ VIVA QUESTIONS (IMPORTANT)

Q1. What are props in React?

👉 Props are used to pass data from parent to child components.

---

Q2. Are props mutable?

👉 No, props are read-only.

---

Q3. What is destructuring in props?

👉 Extracting values directly from props object.

---

Q4. Can we pass multiple props?

👉 Yes, we can pass multiple values.

---

Q5. Difference between props and state?

👉 Props are passed, state is managed internally.

---

🔗 RELATED POSTS

👉 MCA 168 Full Stack Development Lab Programs List
👉 React Counter App – Program 6
👉 React List Rendering – Program 7
👉 React Toggle Visibility – Program 8
👉 React Background Color – Program 9

---

📌 CONCLUSION

Props are the backbone of React applications. They allow components to communicate and make your UI dynamic and reusable.

👉 Master props to build real-world React applications effectively.

---

Further Reading

JUnit Tutorial

How to Master Full Stack Development?

Spring Framework Practice Problems and Their Solutions

30 MCQs on JUnit

From Google to the World: The Story of Go Programming Language

Why Go? Understanding the Advantages of this Emerging Language

Creating and Executing Simple Programs in Go

20+ Interview Questions on Go Programming Language

100+ MCQs On Java Architecture

Java Practice Exercise

• Angular
• ASP.NET
• C
• C#
• C++
• CSS
• Dot Net Framework
• HTML
• IoT
• Java
• JavaScript
• Kotlin
• PHP
• Power Bi
• Python
• Scratch 3.0
• TypeScript
• VB.NET

Princites