React Props: How Do Components Share Data With Each Other?

Imagine you're building an e-commerce application.

You have one Product component, but you need to display different products:

• Laptop – ₹50,000
• Mobile – ₹20,000
• Headphones – ₹2,000

Would you create three separate components for these products?

Not necessary!

React provides something called Props (Properties) that allows you to reuse the same component with different data.

1. What are Props?

Props are a way to pass data from a parent component to a child component.

Think of a component as a function. Props act like the function's parameters.

Let's understand with an example.

Parent Component

function App() {
    return (
        <div>
            <Product name="Laptop" price={50000} />
            <Product name="Mobile" price={20000} />
            <Product name="Headphones" price={2000} />
        </div>
    );
}

Here, we're passing different values to the same Product component.

Child Component

function Product(props) {
    return (
        <div>
            <h2>{props.name}</h2>
            <p>Price: ₹{props.price}</p>
        </div>
    );
}

The child component receives the values through the props object.

Output

Laptop
Price: ₹50000

Mobile
Price: ₹20000

Headphones
Price: ₹2000

Notice something?

We created only one component but reused it three times with different data.

That's the power of props!

2. How do Props work internally?
When a parent component passes data to a child component, React makes that data available through the child's props.

For example:

<Product name="Laptop" price={50000} />

The child receives an object conceptually like this:

{
    name: "Laptop",
    price: 50000
}

You can access these values using:

props.name
props.price

3. Props Destructuring

Instead of writing props.name and props.price repeatedly, we can use destructuring.

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

Both approaches work the same way.

4. Important Rules About Props

Props are passed from parent to child.

Props can contain strings, numbers, arrays, objects and functions.

Props are read-only.

A child component should not directly modify its props.

Different component instances can receive different props.

5. When do developers use Props?

Real-world examples:

Passing product information to product cards.

Passing user information to profile components.

Passing data to reusable table components.

Passing event handler functions to child components.

Passing configuration values to reusable UI components.

Final Thoughts :

Props make React components reusable and help us build applications with smaller, independent components.

Instead of writing the same UI repeatedly, create one reusable component and provide different data through props.

*Write once. Reuse everywhere. That's the idea behind React Props! *