React Props Explained with Greeting Component Example

April 4, 2026

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

Create a component
Pass data using props
Access props inside component
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.

📌 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.