React Props Pass Data Between Components

What Are Props?

Props, short for properties, are the inputs passed from one component to another. They allow a parent component to send data into a child component. This is how React components become flexible and reusable instead of hardcoded for one single situation.

If components are the building blocks of a React app, props are one of the main ways those blocks communicate. A component can receive text, numbers, arrays, objects, booleans, JSX, or even functions through props.

Why Props Matter

They let one component reuse the same UI with different data
They make parent-to-child communication simple and predictable
They help separate component structure from actual content
They make components easier to test and reuse

Basic Props Example

Passing Basic Props

function UserCard(props) {
    return (
        <div>
            <h3>{props.name}</h3>
            <p>Role: {props.role}</p>
        </div>
    )
}

Basic Props Example - JSX Example

import UserCard from './UserCard'

function App() {
    return (
        <div>
            <UserCard name="Aman" role="Admin" />
            <UserCard name="Riya" role="Editor" />
        </div>
    )
}

Using Destructuring with Props

Instead of writing props.name and props.role repeatedly, developers often destructure props directly in the function parameter.

Props Destructuring

function UserCard({ name, role }) {
    return (
        <div>
            <h3>{name}</h3>
            <p>Role: {role}</p>
        </div>
    )
}

Different Types of Props

Props can contain many kinds of values, not just strings.

String, Number, Boolean, Array, and Function Props

function ProductCard({ name, price, inStock, tags, onBuy }) {
    return (
        <div>
            <h3>{name}</h3>
            <p>Price: Rs. {price}</p>
            <p>{inStock ? 'In stock' : 'Out of stock'}</p>
            <p>Tags: {tags.join(', ')}</p>
            <button onClick={onBuy}>Buy Now</button>
        </div>
    )
}

function App() {
    return (
        <ProductCard
            name="Laptop"
            price={65000}
            inStock={true}
            tags={['electronics', 'featured']}
            onBuy={() => alert('Buying product')}
        />
    )
}

Default Prop Values

Sometimes a prop is optional. In that case, you can define a default value so the component still behaves correctly when the parent does not provide one.

Default Prop Values - JSX Example

function Badge({ label, color = 'blue' }) {
    return <span className={`badge badge-${color}`}>{label}</span>
}

Props Are Read-Only

Props should never be changed inside the child component. The parent owns that data. A child can use props, display props, or call a function prop to request a change, but it should not mutate the prop value directly.

Passing Functions as Props

A parent component can pass a function to a child. This is how child components notify parents about user actions.

Function Props

function ChildButton({ onAction }) {
    return <button onClick={onAction}>Click Me</button>
}

function App() {
    function handleAction() {
        alert('Child button clicked')
    }

    return <ChildButton onAction={handleAction} />
}

Parent to Child Data Flow

React uses one-way data flow. This means data moves from parent to child through props. That makes it easier to track where data comes from and which component is responsible for changing it.

Event Handling Failure Cases

Mistake	Why it is wrong	Better approach
Changing props inside a child component	Breaks React's one-way data flow	Let the parent update the data
Passing too many unrelated props	Makes components harder to understand	Keep component APIs small and focused
Using props when local state is needed	Creates awkward data ownership	Use props for external input and state for internal changes
Naming props unclearly	Reduces readability	Use descriptive names like onDelete, userName, or isOpen

Best Practices

Use props to make components reusable instead of hardcoding values
Destructure props when it improves readability
Use default values for optional props
Keep props read-only inside child components
Use function props for child-to-parent communication

Summary

Props are one of the most important parts of React because they allow data to move from parent components to child components. They make components dynamic, reusable, and easier to organize. Once you understand props well, it becomes much easier to build components that work cleanly together.

Before you move on