1. What are Props in React?

• Props are read-only and immutable (cannot be changed by the child component).
• They are passed from parent to child components.
• Props allow components to be dynamic and reusable.

✅ Example of Props in Action:

<Greeting name="Zia" />

2. Using Props in Functional Components

Step 1: Create a Child Component (Receiving Props)

📌 Example: Greeting.js

import React from "react";

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

export default Greeting;

Step 2: Use the Component in App.js (Passing Props)

import Greeting from "./Greeting";

function App() {
  return (
    <div>
      <Greeting name="Zia" />
      <Greeting name="Ali" />
    </div>
  );
}

export default App;

3. Using Props in Class Components

Step 1: Create a Class Component

📌 Example: Welcome.js

import React, { Component } from "react";

class Welcome extends Component {
  render() {
    return <h2>Welcome, {this.props.username}!</h2>;
  }
}

export default Welcome;

Step 2: Use the Component in App.js

import Welcome from "./Welcome";

function App() {
  return (
    <div>
      <Welcome username="Zia" />
      <Welcome username="Sarah" />
    </div>
  );
}

export default App;

4. Passing Multiple Props

You can pass multiple props to a component.

📌 Example: Passing Multiple Props

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

export default UserInfo;

Using the Component in App.js

<UserInfo name="Zia" age="25" city="Lahore" />
<UserInfo name="Ali" age="30" city="Karachi" />

5. Props with Default Values

If a prop is not provided, you can set a default value using defaultProps.

📌 Example: Setting Default Props

function Profile(props) {
  return <h2>User: {props.username}</h2>;
}

Profile.defaultProps = {
  username: "Guest",
};

export default Profile;

Using the Component in App.js

<Profile username="Zia" />
<Profile />

6. Props with Destructuring

Instead of using props.name, you can destructure props for cleaner code.

📌 Example: Destructuring Props

function Product({ name, price }) {
  return (
    <div>
      <h2>Product: {name}</h2>
      <p>Price: ${price}</p>
    </div>
  );
}

export default Product;

Using the Component in App.js

<Product name="Laptop" price="999" />
<Product name="Phone" price="599" />

7. Passing Functions as Props (Callback Functions)

You can pass functions as props to child components.

📌 Example: Passing a Function as a Prop

function Button({ onClick }) {
  return <button onClick={onClick}>Click Me</button>;
}

export default Button;

Using the Component in App.js

import Button from "./Button";

function App() {
  const handleClick = () => {
    alert("Button Clicked!");
  };

  return (
    <div>
      <Button onClick={handleClick} />
    </div>
  );
}

export default App;
import Button from "./Button";

function App() {
  const handleClick = () => {
    alert("Button Clicked!");
  };

  return (
    <div>
      <Button onClick={handleClick} />
    </div>
  );
}

export default App;

8. Conclusion

• Props allow data to be passed from parent to child components.
• They make components reusable and dynamic.
• Functional & class components both support props.
• Use defaultProps for fallback values.
• Destructuring props makes code cleaner.

Props are a fundamental concept in React that help build scalable and modular applications! 🚀