Props in React

What are Props in React?

The correct term is React Props — short for Properties.

Props are one of the most important concepts in React. They are used to pass data from one component to another, primarily from a parent component to a child component. React's official documentation describes props as information passed to a JSX tag, and they can contain JavaScript values such as strings, numbers, objects, arrays, functions, and JSX. react.dev

A simple example:

function Welcome(props) {
    return <h1>Hello, {props.name}</h1>;
}

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

Here:

App
 │
 │ name="Syed"
 ↓
Welcome
 │
 ↓
Hello, Syed

name="Syed" is a prop.

Why Do We Need Props?

Components are designed to be reusable.

Consider this component:

function ProductCard() {
    return (
        <div>
            <h2>Laptop</h2>
            <p>₹50,000</p>
        </div>
    );
}

This component can display only one fixed product.

What if we want to display:

Laptop       ₹50,000
Keyboard     ₹2,000
Mouse        ₹1,000
Monitor      ₹15,000

Instead of creating four different components, we can create one reusable component and pass different values through props.

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

Now:

<ProductCard name="Laptop" price={50000} />
<ProductCard name="Keyboard" price={2000} />
<ProductCard name="Mouse" price={1000} />
<ProductCard name="Monitor" price={15000} />

The same component is reused with different data.

So, one of the biggest purposes of props is:

Props allow us to make components reusable and configurable.

Props Follow Parent-to-Child Data Flow

The most common direction of data flow in React is:

Parent Component
       │
       │ Props
       ↓
Child Component

For example:

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

function Welcome({ name }) {
    return <h1>Hello, {name}</h1>;
}

Here:

• App is the parent.
• Welcome is the child.
• name is the prop.
• "Syed" is the value passed through the prop.

React explicitly describes props as the mechanism components use to communicate with each other, with parents passing information to children. react.dev

How to Pass Props

Props are passed to a component in JSX using the same general syntax as attributes.

<User name="Syed" />

Here:

name

is the prop name, and:

"Syed"

is its value.

The child receives it:

function User(props) {
    return <h2>{props.name}</h2>;
}

So the complete flow is:

<User name="Syed" />
       │
       │
       ↓
function User(props)
       │
       ↓
props.name
       │
       ↓
"Syed"

Props Look Like HTML Attributes

You may already know HTML attributes:

<img src="photo.jpg" alt="Profile" />

React components can receive similar-looking values:

<User name="Syed" age={48} />

The important difference is that your own React components can accept arbitrary props, including JavaScript objects, arrays, functions, and JSX. react.dev

For example:

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

Here the component receives three props:

name      → string
price     → number
available → boolean

Passing a String Prop

Strings are usually passed using quotes.

function User({ name }) {
    return <h2>{name}</h2>;
}

Pass the value:

<User name="Syed" />

The child receives:

name = "Syed"

You can also use a JavaScript expression:

const userName = "Syed";

<User name={userName} />

These two are different syntaxes:

<User name="Syed" />

and:

<User name={userName} />

The first passes a literal string.

The second evaluates the JavaScript expression userName.

Passing a Number Prop

For numbers, use curly braces.

<User age={48} />

Then:

function User({ age }) {
    return <h2>Age: {age}</h2>;
}

Don't do this if you want a number:

<User age="48" />

That passes "48" as a string, not the number 48.

Compare:

<User age="48" />

age → string

with:

<User age={48} />

age → number

This distinction becomes important when performing calculations.

<User age={48} />

Inside:

age + 1

produces:

49

But:

<User age="48" />

can lead to string behavior:

"48" + 1

which produces:

"481"

Passing Boolean Props

Boolean values are passed using curly braces.

<User isActive={true} />

or:

<User isActive={false} />

Inside:

function User({ isActive }) {
    return (
        <p>
            {isActive ? "Active" : "Inactive"}
        </p>
    );
}

A common shorthand is:

<User isActive />

This is equivalent to:

<User isActive={true} />

This is commonly used for boolean props.

Passing an Array as a Prop

Props can contain arrays.

const skills = ["C#", ".NET", "React"];

<User skills={skills} />

The component can receive it:

function User({ skills }) {
    return (
        <ul>
            {skills.map(skill => (
                <li key={skill}>{skill}</li>
            ))}
        </ul>
    );
}

The data flow is:

Parent
  │
  │ ["C#", ".NET", "React"]
  ↓
Child
  │
  ↓
skills.map(...)

Passing an Object as a Prop

You can pass an object.

const user = {
    name: "Syed",
    age: 48,
    role: "Team Lead"
};

<User user={user} />

Child:

function User({ user }) {
    return (
        <div>
            <h2>{user.name}</h2>
            <p>{user.age}</p>
            <p>{user.role}</p>
        </div>
    );
}

You can also create the object directly inside JSX:

<User
    user={{
        name: "Syed",
        age: 48,
        role: "Team Lead"
    }}
/>

The double curly braces may initially look confusing.

user={{
    name: "Syed"
}}

The outer {} means:

"Evaluate this JavaScript expression."

The inner {} creates the JavaScript object.

Conceptually:

JSX curly braces
       ↓
JavaScript object
       ↓
{
    name: "Syed"
}

React's documentation uses this same pattern when passing objects as props. react.dev

Receiving Props Using the Props Object

The traditional way to receive props is:

function User(props) {
    return (
        <div>
            <h2>{props.name}</h2>
            <p>{props.age}</p>
        </div>
    );
}

When you write:

<User name="Syed" age={48} />

React effectively provides an object containing the props:

props
│
├── name → "Syed"
└── age  → 48

Therefore:

props.name

gives:

Syed

and:

props.age

gives:

48

Receiving Props Using Destructuring

In modern React, you will frequently see:

function User({ name, age }) {
    return (
        <div>
            <h2>{name}</h2>
            <p>{age}</p>
        </div>
    );
}

This is JavaScript object destructuring.

It is essentially a shorter way of writing:

function User(props) {
    const name = props.name;
    const age = props.age;

    return (
        <div>
            <h2>{name}</h2>
            <p>{age}</p>
        </div>
    );
}

So:

function User({ name, age })

means:

Extract name and age from the props object.

React's documentation recommends this pattern because components receive a single props object and destructuring makes the individual props convenient to use. react.dev

Passing a Function as a Prop

This is one of the most important uses of props.

Props aren't limited to data. You can pass functions.

For example:

function Parent() {
    function handleClick() {
        alert("Button clicked");
    }

    return <Child onClick={handleClick} />;
}

Child:

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

The flow is:

Parent
   │
   │ handleClick function
   ↓
Child
   │
   │ onClick
   ↓
<button>

This allows the child component to notify or trigger behavior defined by the parent.

React specifically documents passing event handlers such as onClick as props as a common pattern. react.dev

Why Pass Functions Through Props?

Suppose you have:

function Parent() {
    function handleDelete() {
        console.log("Deleting...");
    }

    return <DeleteButton onDelete={handleDelete} />;
}

The child:

function DeleteButton({ onDelete }) {
    return (
        <button onClick={onDelete}>
            Delete
        </button>
    );
}

The child doesn't need to know how deletion works.

It only knows:

"When the user clicks me, call onDelete."

The parent decides what onDelete actually does.

This creates good separation of responsibilities.

Passing JSX as a Prop

Props can also contain JSX.

The most common example is the special children prop.

function Card({ children }) {
    return (
        <div className="card">
            {children}
        </div>
    );
}

Now:

<Card>
    <h2>React</h2>
    <p>Learn React Props</p>
</Card>

Everything between:

<Card>

and:

</Card>

is passed to the Card component through children.

Conceptually:

Card
 │
 │ children
 ↓
<h2>React</h2>
<p>Learn React Props</p>

React calls this the children prop. react.dev

Understanding the children Prop

Consider:

function Card({ children }) {
    return (
        <div className="card">
            {children}
        </div>
    );
}

And:

<Card>
    <h2>Hello</h2>
</Card>

React provides the child content to the component:

children
    │
    ↓
<h2>Hello</h2>

The component then decides where to render it:

<div className="card">
    {children}
</div>

This makes wrapper components extremely reusable.

For example:

<Card>
    <Product />
</Card>

or:

<Card>
    <User />
</Card>

or:

<Card>
    <h2>Welcome</h2>
</Card>

The Card doesn't need to know what it contains.

Props Are Read-Only

This is a very important React rule.

You should not modify props directly.

Suppose:

function User({ name }) {
    name = "Another Name";

    return <h2>{name}</h2>;
}

You should not treat props as data that the child is allowed to modify.

Props represent values supplied by the parent for a particular render. React describes props as immutable snapshots. react.dev

Think of this:

Parent
  │
  │ name="Syed"
  ↓
Child
  │
  └── Can READ name
      Cannot MODIFY parent's name

Props vs State

This is one of the most important distinctions in React.

Example of props:

function User({ name }) {
    return <h2>{name}</h2>;
}

Example of state:

const [count, setCount] = useState(0);

Think of it this way:

Props
   ↓
Parent gives data to Child

State
   ↓
Component manages its own changing data

Can Props Change?

There is an important distinction.

A child cannot modify its props.

But the value of a prop can change over time because the parent can render the child with different props.

For example:

function App() {
    const [name, setName] = useState("Syed");

    return <User name={name} />;
}

Initially:

name = "Syed"

Later the parent changes its state:

setName("Ahmed");

The child receives:

name = "Ahmed"

So from the child's perspective:

Props are read-only.

But from the application's perspective:

Props can receive new values on subsequent renders.

React describes props as snapshots for each render, which is why you should not mutate them directly. react.dev

Props Are Not Only Strings

A common beginner misconception is:

"Props are like HTML attributes, so they can only contain strings."

That is incorrect.

You can pass:

String
Number
Boolean
Array
Object
Function
JSX
React element

For example:

<User
    name="Syed"
    age={48}
    isActive={true}
    skills={["C#", "React"]}
    address={{ city: "Chennai" }}
    onClick={handleClick}
/>

All of these are props.

React explicitly supports passing arbitrary JavaScript values through props. react.dev

Multiple Props

A component can receive any number of props.

function Employee({
    name,
    age,
    designation,
    department,
    isActive
}) {
    return (
        <div>
            <h2>{name}</h2>
            <p>Age: {age}</p>
            <p>Designation: {designation}</p>
            <p>Department: {department}</p>
            <p>
                Status: {isActive ? "Active" : "Inactive"}
            </p>
        </div>
    );
}

Usage:

<Employee
    name="Syed"
    age={48}
    designation="Team Lead"
    department="IT"
    isActive={true}
/>

The props object conceptually looks like:

props
│
├── name
├── age
├── designation
├── department
└── isActive

Default Values for Props

You can provide default values when a prop is missing.

With destructuring:

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

If you write:

<Button />

the component uses:

Click Me

If you write:

<Button text="Save" />

it uses:

Save

The default is used when the prop is missing or is undefined; it is not used for values such as null or 0. react.dev

Props and Conditional Rendering

Props can control what a component renders.

function UserStatus({ isLoggedIn }) {
    if (isLoggedIn) {
        return <h2>Welcome back!</h2>;
    }

    return <h2>Please login</h2>;
}

Usage:

<UserStatus isLoggedIn={true} />

Result:

Welcome back!

And:

<UserStatus isLoggedIn={false} />

Result:

Please login

So props can control component behavior as well as its displayed data.

Props and Styling

Props can also be used to customize styles.

function Heading({ color }) {
    return (
        <h1 style={{ color: color }}>
            Welcome
        </h1>
    );
}

Usage:

<Heading color="blue" />

or:

<Heading color="red" />

You can also simplify:

function Heading({ color }) {
    return (
        <h1 style={{ color }}>
            Welcome
        </h1>
    );
}

This is useful for creating reusable UI components.

Props and CSS Classes

You can pass a class name through props.

function Card({ className }) {
    return (
        <div className={className}>
            Product Card
        </div>
    );
}

Usage:

<Card className="product-card" />

The resulting DOM is approximately:

<div class="product-card">
    Product Card
</div>

This pattern is commonly used in reusable component libraries.

Passing Props to Native HTML Elements

Props are not only for custom components.

React's built-in DOM components also accept props.

For example:

<img
    src="/images/profile.jpg"
    alt="Profile"
    width={100}
    height={100}
/>

Here:

src
alt
width
height

are props for the React <img> element. React's DOM components support standard browser properties and events. react.dev

This connects to something you were learning earlier about JSX:

class

becomes:

className

in React.

Similarly, React uses its own JSX prop conventions for many DOM properties.

Passing Event Handlers as Props

Consider a reusable button:

function Button({ onClick, children }) {
    return (
        <button onClick={onClick}>
            {children}
        </button>
    );
}

Now the parent can decide what happens:

function App() {
    function handleSave() {
        console.log("Saving...");
    }

    return (
        <Button onClick={handleSave}>
            Save
        </Button>
    );
}

The same button can be reused:

<Button onClick={handleSave}>
    Save
</Button>

<Button onClick={handleDelete}>
    Delete
</Button>

<Button onClick={handleCancel}>
    Cancel
</Button>

The button component doesn't contain business-specific logic.

It simply executes the function it receives.

Props Enable Component Communication

Consider:

App
│
├── Header
├── ProductList
│   ├── ProductCard
│   ├── ProductCard
│   └── ProductCard
└── Footer

The parent can provide data to children:

ProductList
      │
      │ product
      ↓
ProductCard

And event handlers can move in the opposite conceptual direction:

ProductCard
      │
      │ invokes callback
      ↓
ProductList
      │
      ↓
Parent logic

The actual function is passed down through props, and the child invokes it.

This is a very common React pattern.

Props Drilling

Suppose the component hierarchy is:

App
 │
 ↓
Dashboard
 │
 ↓
UserPanel
 │
 ↓
UserProfile

Suppose App has user data:

App
 │
 │ user
 ↓
Dashboard
 │
 │ user
 ↓
UserPanel
 │
 │ user
 ↓
UserProfile

If Dashboard and UserPanel don't actually need the user data but only pass it along, this can become prop drilling.

Example:

function App() {
    const user = {
        name: "Syed"
    };

    return <Dashboard user={user} />;
}

function Dashboard({ user }) {
    return <UserPanel user={user} />;
}

function UserPanel({ user }) {
    return <UserProfile user={user} />;
}

function UserProfile({ user }) {
    return <h2>{user.name}</h2>;
}

This works, but it can become cumbersome when the data needs to travel through many layers.

React recommends considering alternatives such as component composition or Context when prop passing becomes excessively deep. react.dev

Props vs Context

Props:

Parent
  │
  ↓
Child
  │
  ↓
Grandchild

Context:

Provider
  │
  ├── Component A
  ├── Component B
  └── Component C
       │
       └── Can access shared context

Context can make information available to components deeper in the tree without explicitly passing it through every intermediate component. react.dev

However, don't immediately use Context just because props require several levels. Explicit props can make data flow easier to understand.

Spread Props

You can pass multiple props using the spread syntax.

Suppose:

const user = {
    name: "Syed",
    age: 48,
    role: "Team Lead"
};

Instead of:

<User
    name={user.name}
    age={user.age}
    role={user.role}
/>

you can write:

<User {...user} />

React will receive:

name
age
role

as individual props.

Inside:

function User({ name, age, role }) {
    return (
        <div>
            <h2>{name}</h2>
            <p>{age}</p>
            <p>{role}</p>
        </div>
    );
}

React supports this pattern, but its documentation recommends using spread syntax with restraint because explicitly listing props can often make component APIs clearer. react.dev

Special Props: key and ref

There are two important props-like values you should know:

key
ref

They are special because React uses them internally and they are not available to the component in the same way as ordinary props.

For example:

<Product
    key={product.id}
    id={product.id}
/>

You can access:

props.id

but you cannot expect:

props.key

to contain the key value.

React specifically documents key and ref as special props that are not forwarded to the component like normal props. react.dev

Props Are Immutable — Don't Mutate Them

Never do this:

function User(props) {
    props.name = "Ahmed";

    return <h2>{props.name}</h2>;
}

This violates React's model of props.

Instead, if something needs to change interactively, use state in the appropriate component:

const [name, setName] = useState("Syed");

or ask the parent to provide a different prop value.

React's rules explicitly state that props and state are immutable snapshots and should not be mutated directly. react.dev

Complete Example

Let's combine the important concepts.

Parent:

import { useState } from "react";

function App() {
    const [count, setCount] = useState(0);

    function handleIncrement() {
        setCount(count + 1);
    }

    return (
        <div>
            <Counter
                title="Product Counter"
                count={count}
                onIncrement={handleIncrement}
            />
        </div>
    );
}

Child:

function Counter({
    title,
    count,
    onIncrement
}) {
    return (
        <div>
            <h2>{title}</h2>

            <p>Count: {count}</p>

            <button onClick={onIncrement}>
                Increment
            </button>
        </div>
    );
}

Here the parent passes three props:

title
count
onIncrement

The flow is:

                 App
                  │
       ┌──────────┼──────────┐
       │          │          │
     title       count    onIncrement
       │          │          │
       └──────────┼──────────┘
                  ↓
               Counter
                  │
                  ↓
                 UI

The important point is that Counter doesn't own the count state. App owns it.

Counter receives the current count through:

count={count}

and receives a function through:

onIncrement={handleIncrement}

When the button is clicked:

onClick={onIncrement}

the child calls the parent's function.

The parent updates its state:

setCount(count + 1);

React renders again, and the child receives the new count prop.

The Most Important Props Concepts

You should remember these concepts:

Props
 │
 ├── Pass data from parent → child
 │
 ├── Make components reusable
 │
 ├── Can contain any JavaScript value
 │     ├── String
 │     ├── Number
 │     ├── Boolean
 │     ├── Array
 │     ├── Object
 │     ├── Function
 │     └── JSX
 │
 ├── Read using props.name
 │
 ├── Usually destructured
 │
 ├── Read-only
 │
 ├── Can receive new values on future renders
 │
 ├── children is a special prop
 │
 ├── Functions can be passed as props
 │
 └── key and ref are special

Props vs State — Simple Interview Explanation

If an interviewer asks "What is the difference between props and state?", a strong answer is:

Props are read-only values passed from a parent component to a child component and are mainly used to configure and communicate with components. State is data managed by a component that can change over time through React's state update mechanisms. When state changes, React can render the component again with updated values.

Interview Definition of Props

If the interviewer asks "What are props in React?", you can answer:

Props, short for properties, are read-only inputs passed from a parent component to a child component. They allow components to communicate and make components reusable by allowing the same component to render different data or behavior. Props can contain strings, numbers, booleans, objects, arrays, functions, and JSX.

The most important mental model is:

                 Parent Component
                       │
                       │ Props
                       ↓
                Child Component
                       │
                ┌──────┴──────┐
                │             │
              Data         Function
                │             │
                ↓             ↓
              Render       Event

Props = inputs to a React component. They are similar in spirit to function arguments: the parent supplies them, and the child reads them. react.dev