Props in React – Introduction

When building React applications, we often create multiple components. These components need to communicate with each other and share data. Props are one of the most important concepts used for passing data between React components.

The word Props is short for Properties. Props allow us to pass data from a parent component to a child component.

What are Props?

Props are read-only data passed from a parent component to a child component.

For example, imagine a Student component. Instead of writing a separate component for every student, we can create one reusable Student component and pass different student information using props.

function App() {
  return <Student name="Abishek" />;
}

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

Here, name="Abishek" is a prop.

The Student component receives this data through the props object. We can access the value using:

props.name

The output will be:

Hello Abishek

How Props Work

The basic data flow looks like this:

Parent Component
       ↓
     Props
       ↓
Child Component

For example:

function App() {
  return <Student name="Abishek" age={21} />;
}

function Student(props) {
  return (
    <div>
      <h1>{props.name}</h1>
      <p>Age: {props.age}</p>
    </div>
  );
}

In this example, the App component is the parent, while Student is the child.

The parent passes two props:

name="Abishek"
age={21}

The child receives them through props.

Conceptually, the props object looks like:

{
  name: "Abishek",
  age: 21
}

Why Do We Use Props?

Props make React components reusable and dynamic.

For example, we can use the same Student component for different students:

function App() {
  return (
    <>
      <Student name="Abishek" age={21} />
      <Student name="Rahul" age={22} />
      <Student name="Arun" age={20} />
    </>
  );
}

We don't need to create three different components. The same component can display different information based on the props it receives.

Props are Read-Only

One important rule is that props should not be modified by the child component.

The child can read and use props, but it should not directly change them.

function Student(props) {
  // props.name = "Rahul"; ❌ Don't modify props
}

If data needs to be changed, React provides other mechanisms such as state and event handlers.

Real-World Example

Think about an online shopping website.

A reusable Product component might receive:

Product Name
Price
Image
Rating

Different products can pass different values to the same component.

<Product name="Laptop" price={50000} />
<Product name="Phone" price={25000} />
<Product name="Headphones" price={3000} />

The Product component can then display the information it receives.

This is one of the main reasons props are useful in React: one component can be reused with different data.

Props vs State

Props and state are both important in React, but they have different purposes.

Props	State
Passed from parent to child	Managed inside a component
Read-only	Can be updated
Used to pass data	Used to manage changing data
Makes components reusable	Makes components interactive

Conclusion

Props are a fundamental concept in React. They allow components to communicate and share data, mainly by passing information from a parent component to a child component. Props also make components reusable because the same component can display different information depending on the values it receives.

A simple way to remember props is:

Props = Data passed from Parent → Child