What are Props in React? – Complete Beginner to Advanced Guide (2026)

 

What are Props (Props is short for Properties) in React?

 

Props is short for Properties. In React, props are used to pass data from a parent component to a child component. They act as a way to send information from one component to another without rewriting the same component multiple times.

Props are short for properties, and they are one of the most important concepts in React. Props are used to pass data from one component to another. By using props, a component becomes flexible, reusable, and more readable because the data is not baked into the component itself but received. 

The best analogy for props is that of giving information to someone. For instance, different assignments can be given to different students by the teacher. All of them have to do the same thing, but each student gets a unique assignment. Similar to how props work in React. The same component renders different data depending on what prop value is passed. 

Props can hold many types of data, including:

• Strings (text)
• Numbers
• Boolean values (true or false)
• Arrays
• Objects
• Functions
• JSX elements
• Other React components

How Props Work

Parent Component

       │

       │ Sends Data

       ▼

+---------------------------+

|  Child Component   |

+--------------------------+

       │

 Uses Props

       ▼

 Display Data

How Props Work

The process of using props is simple:

1. A parent component creates a child component.
2. The parent passes data as custom attributes.
3. The child component receives those values as props.
4. The child displays or uses the data.
5. If the parent updates the values, React automatically updates the user interface. 

Why Are Props Important?

Props play a key role in React development because they help you:

• Reuse the same component with different data.
• Reduce duplicate code.
• Keep components small and organized.
• Make applications easier to maintain.
• Display dynamic content without changing the component's structure.
• Improve the readability and scalability of your project. 

1. Basic Props Syntax

Parent Component (App.jsx)

The parent component sends data to the child component.

import Student from "./Student"; 

function App() {

  return (

    <Student

      name="Rahul"

      age={20}

      course="BCA"

    />

  );

}

 export default App;

Explanation

• Student is the child component.
• name, age, and course are props.
• "Rahul" and "BCA" are string values.
• {20} is a number, so it is written inside curly braces.
• The parent component passes these values to the child component.

---

2. Child Component Syntax

The child component receives the data using the props object.

function Student(props) {

  return (

    <div>

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

      <p>Age: {props.age}</p>

      <p>Course: {props.course}</p>

    </div>

  );

}

 export default Student;

Explanation

• props is an object that contains all values sent by the parent.
• props.name displays the student's name.
• props.age displays the student's age.
• props.course displays the student's course.
• The child component only reads the values; it should not modify them.

---

3. Props Using Destructuring (Recommended)

Instead of writing props.name, props.age, and props.course repeatedly, you can extract the values directly.

function Student({ name, age, course }) {

  return (

    <div>

      <h2>{name}</h2>

      <p>Age: {age}</p>

      <p>Course: {course}</p>

    </div>

  );

} 

export default Student;

Explanation

• { name, age, course } extracts the required properties from the props object.
• You can use name, age, and course directly without writing props. each time.
• This syntax is cleaner, shorter, and widely used in modern React applications.

React Component Naming Rules Explained

---

4. Passing Different Types of Props

String

<Greeting message="Welcome to React" />

Explanation:
A string value is written inside quotation marks.

---

Number

<Product price={4999} />

Explanation:
Numbers are written inside curly braces.

---

Boolean

<User isLoggedIn={true} />

Explanation:
Boolean values (true or false) are passed using curly braces.

---

Array

<StudentList names={["Rahul", "Priya", "Amit"]} />

Explanation:
Arrays are passed inside curly braces because they are JavaScript values.

---

Object

<Employee employee={{ name: "Rahul", department: "IT" }} />

Explanation:
Objects are also passed inside curly braces.

---

Function

<Button onClick={handleClick} />

Explanation:
Functions can be passed as props so that child components can execute them when needed, such as when a button is clicked.

---

Props Syntax Flow

Parent Component (App) 

<Student

   name="Rahul"

   age={20}

   course="BCA"

/> 

          │

          │ Passes Props

          ▼

 

Child Component

 

function Student(props)

 

          │

          ▼

 props.name

props.age

props.course

           │

          ▼

 Display Data on Screen

What EXport Components in React 

Rules for Writing Props

• Pass props inside the opening tag of a component.
• Use meaningful prop names such as name, price, or title.
• Write string values inside quotation marks.
• Write numbers, booleans, arrays, objects, variables, and functions inside curly braces {}.
• Access props using the props object or by destructuring.

Do not modify props inside the child component because props are read-only

Real-Life Example

Think about an employee ID card.

Every employee ID card looks almost the same. It contains the company logo, the employee's photo, name, department, and employee ID. The layout is identical for every employee, but the information printed on each card is different.

Instead of designing hundreds of different ID cards, the company creates one ID card template and fills it with different employee details.

React components work in the same way. The component is the template, and props provide the different information that should appear inside it.

Why Are Props Important?

Without props, developers would have to create a separate component for every piece of data they want to display. This would make applications larger, harder to maintain, and full of duplicate code.

Props solve this problem by allowing one component to work with different values. As a result, developers can write less code while creating more flexible applications.

For example, one ProfileCard component can display information for hundreds of users simply by receiving different props such as the user's name, profile picture, job title, and location.

Characteristics of Props

Props have several important characteristics:

1. They are used to pass data from one component to another.
2. Data always flows from the parent component to the child component.
3. Props are read-only inside the child component.
4. They help create reusable components.
5. They reduce duplicate code.
6. They make applications easier to maintain.
7. They allow components to display dynamic content.
8. They support a clean and organized project structure.

Where Are Props Used?

• Displaying user profile information
• Showing product details in an online store
• Creating reusable buttons
• Displaying blog posts
• Showing student records
• Creating navigation menus
• Building dashboards
• Displaying weather information
• Showing news articles
• Passing event-handling functions to child components

Benefits of Using Props

Using props offers many advantages:

1. Code Reusability    :-   Write one component and use it multiple times.
2. Cleaner Code          :-  Avoid repeating similar code.
3. Easy Maintenance  :-  Updating one component updates every place where it is used.
4. Dynamic User Interface :- Different data can be displayed without changing the component's structure.
5. Better Organization :- Components become smaller and easier to understand.
6. Scalability               :-  Large applications become easier to manage. 

Frequently Asked Questions (FAQs) – React Props

1. What are Props in React?

Props (short for Properties) are used to pass data from a parent component to a child component. They help components display different information while using the same code.

---

2. Why are Props used in React?

Props allow developers to create reusable components. Instead of writing the same component multiple times with different content, you can pass different values through props.

---

3. What does Props stand for?

Props stands for Properties. They are similar to attributes used in HTML elements but are designed for React components.

---

4. Who sends Props in React?

The parent component sends props, and the child component receives and uses them.

---

5. Can a child component change Props?

No. Props are read-only (immutable). A child component should only use the values it receives and should never modify them.

---

6. Can Props store different types of data?

Yes. Props can store many types of values, including:

• Strings
• Numbers
• Booleans
• Arrays
• Objects
• Functions
• JSX Elements

---

7. What is the difference between Props and State?

Props are passed from a parent component and cannot be changed by the child. State belongs to a component and can be updated whenever the component needs to change its own data.

---

8. Can we pass multiple Props to a component?

Yes. A component can receive as many props as needed.

Example:

<Product
  name="Laptop"
  price={50000}
  brand="Dell"
  stock={true}
/>

---

9. What is Props Destructuring?

Props destructuring is a JavaScript feature that allows you to directly extract values from the props object, making your code shorter and easier to read.

Example:

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

---

10. Can we pass a function as a Prop?

Yes. Functions are commonly passed as props so that a child component can notify the parent when an event occurs.

---

11. What happens if a Prop is not passed?

If a prop is not provided, its value becomes undefined unless a default value is specified.

---

12. Why are Props important in React?

Props make applications more organized, reusable, and easier to maintain. They support one-way data flow, which helps keep the application predictable and easier to debug.

---

React Props Interview Questions and Answers

1. What are Props in React?

Answer:
Props are read-only values passed from a parent component to a child component. They allow components to receive dynamic data and make them reusable.

---

2. What is the full form of Props?

Answer:
Props stands for Properties.

---

3. Why do we use Props?

Answer:
Props are used to:

• Pass data between components.
• Create reusable components.
• Display dynamic content.
• Reduce duplicate code.

---

4. How are Props passed to a child component?

Answer:
Props are passed as attributes when a component is called.

<Student name="Rahul" age={20} />

---

5. How do you access Props inside a component?

Answer:
Props can be accessed using the props object or by destructuring.

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

or

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

---

6. Are Props mutable or immutable?

Answer:
Props are immutable. A child component cannot modify the props it receives.

---

7. Can Props contain functions?

Answer:
Yes. Functions can be passed as props, especially for handling button clicks and other events.

---

8. Can you pass an object or array as Props?

Answer:
Yes. Props can contain objects, arrays, strings, numbers, booleans, functions, and JSX.

---

9. What is one-way data flow in React?

Answer:
One-way data flow means data moves from the parent component to the child component through props. Child components receive data but do not change it directly.

---

10. What is Props Destructuring?

Answer:
Props destructuring is a cleaner way to extract prop values directly from the props object, making the code easier to read.

---

11. What happens if you try to modify Props?

Answer:
React does not allow props to be modified directly. Changing props can lead to unexpected behavior and goes against React's design principles.

---

12. Can a component work without Props?

Answer:
Yes. A component can work without props if it displays fixed content. However, props are needed when the component should display different data based on the parent component.

Reusable Components in React

---

13. What is the difference between HTML attributes and React Props?

Answer:
HTML attributes define properties for HTML elements, while React props pass data to custom React components. Although the syntax looks similar, their purpose is different.

---

14. What are the benefits of using Props?

Answer:

• Reusable components
• Cleaner code
• Better maintainability
• Dynamic user interfaces
• Easier debugging through one-way data flow