React Props

Introduction

Props are one of the most important concepts in React.

Props are used to pass data from one component to another. They make React applications dynamic, reusable, and flexible. Without props, components would display only static content, which would limit the functionality of applications.

In this tutorial, you will learn what props are, why they are used, syntax, examples, real-life applications, common mistakes, interview questions, and best practices.

What are Props in React?

Props stands for Properties.

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

They work similarly to function arguments in JavaScript.

OR

Props allow components to receive dynamic data.

Why Props are Used in React

Props are used because they:

• Make components reusable
• Allow dynamic content
• Improve application flexibility
• Help components communicate
• Reduce duplicate code

Without props, developers would need to create separate components for every small variation.

How Props Work?

Props follow one-way data flow:

• Parent Component → Child Component

The parent component sends data, and the child component receives it.

Syntax of Props in React

Parent Component

<User name="Gaurav" />

Child Component

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

Output

Understanding the Syntax

name="Gaurav"

The parent component sends data.

props.name

The child component receives and displays the data.

Example of Props in React

function Student(props) {
 return (
   <h1>
     Student Name: {props.name}
   </h1>
 );
}
function App() {
 return (
   <div>
     <Student name="Rahul" />
     <Student name="Aman" />
   </div>
 );
}
export default App;

Output

Why Props are Important?

Props make components reusable.

Instead of creating multiple components:

Wrong Approach:

• Student1 Component
• Student2 Component
• Student3 Component

Correct Approach:

• One reusable Student component using props

Props with Multiple Values

Props can pass multiple pieces of data.

Example

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

Output

Props with Variables

Props can pass variables dynamically.

Example

function User(props) {
 return <h1>{props.name}</h1>;
}
function App() {
 const username = "Gaurav";
 return <User name={username} />;
}

Output

Props Destructuring

Destructuring makes props cleaner and easier to read.

Without Destructuring

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

With Destructuring

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

Advantages of Destructuring

• Cleaner code
• Better readability
• Less repetition

Passing Functions as Props

Functions can also be passed as props.

Example

function Button(props) {
 return (
   <button onClick={props.clickHandler}>
     Click
   </button>
 );
}
function App() {
 function showMessage() {
   alert("Button Clicked");
 }
 return (
   <Button clickHandler={showMessage} />
 );
}

Real-Life Example

In e-commerce websites:

• Product details are passed using props
• Shopping cart items use props
• User information uses props

Example:

• Product Name
• Price
• Image
• Ratings

All passed dynamically using props.

Children Props in React

React provides a special prop called children.

It allows components to wrap content inside them.

Example

function Layout(props) {
 return (
   <div>
     {props.children}
   </div>
 );
}
function App() {
 return (
   <Layout>
     <h1>Hello React</h1>
   </Layout>
 );
}

Output

Default Props in React

Default props provide fallback values.

Example

function User({ name = "Guest" }) {
 return <h1>{name}</h1>;
}

Output

Props are Read-Only

Props cannot be modified inside child components.

Wrong Example

This causes errors because props are immutable.

Difference Between Props and State

Real-Life Analogy of Props

Think of props like function parameters.

Example:

function greet(name) {
 return "Hello " + name;
}

Similarly in React:

<User name="Gaurav" />

Advantages of Props in React

Common Mistakes in Props

1. Modifying Props Directly

Wrong:

props.name = "Aman";

Props should never be modified.

2. Forgetting Curly Braces for Variables

Wrong:

<User name=username />

Correct:

<User name={username} />

3. Incorrect Props Name

Wrong:

<User username="Gaurav" />

Receiving:

props.name

This causes undefined values.

4. Passing Too Many Props

Too many props make components difficult to maintain.

5. Not Using Destructuring

Large components become messy without destructuring.

Real-World Applications of Props

Props are heavily used in:

• Social Media Apps
• E-commerce Websites
• Dashboards
• Chat Applications
• Blogging Platforms

Examples:

• User profile data
• Product information
• Notifications
• Comments
• Messages

Conclusion

Props are one of the most important concepts in React because they allow components to communicate and display dynamic data. They help create reusable, flexible, and scalable applications.

By using props properly, developers can build cleaner and more maintainable React applications. Understanding props is essential for every React developer because almost every React project uses them extensively.

Once you master props, learning advanced React concepts like state management, hooks, and context API becomes much easier.

Continue Learning React