Props in React – Passing Data Between Components

🔹 What are Props in React?

Props are simply arguments passed into React components. They are read-only and allow parent components to send data to child components efficiently.

// Example: Passing Props to a Child Component
function Welcome(props) {
  return <h2>Hello, {props.name}!</h2>;
}

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

export default App;

In the above example, the App component sends a prop named name to the Welcome component. Inside Welcome, it’s accessed using props.name.

🔹 Passing Multiple Props

You can pass as many props as you need by adding attributes in the component tag.

    // Example: Passing Multiple Props
    function UserCard(props) {
        return (
            <div>
            <h3>{props.username}</h3>
            <p>Role: {props.role}</p>
            </div>
        );
    }

    function App() {
        return (
            <UserCard username="Vara Prasad" role="Frontend Developer" />
        );
    }
    

🔹 Destructuring Props

Destructuring makes your code cleaner and easier to read. Instead of using props.name, you can extract props directly in the function parameter.

    // Example: Using Destructuring
    function Welcome({ name }) {
        return <h2>Welcome, {name}!</h2>;
    }

🔹 Using Props in Class Components

    // Example: Props in Class Component
    import React, { Component } from "react";

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

    export default Welcome;

💡 Real-Time Use Cases of Props

• Dynamic Data Display: Pass API-fetched data (like user info, products, or comments) to child components.
• Reusable UI Elements: Buttons, Cards, Modals, or Lists with different data via props.
• Component Communication: Simplifies parent-to-child data flow without complex state management.

🚀 Why Use Props?

Props help make React components modular and scalable. Instead of hardcoding data, you can easily reuse a component across multiple parts of your app with different inputs.

🧠 In Summary

React props are the foundation of dynamic UIs. They make it possible to create flexible, maintainable, and data-driven components that adapt to various contexts and user needs.