Props in React

As you build React applications, you will often need to display different information using the same component. For example, an online shopping website may have hundreds of product cards, but you do not want to create a separate component for every product.

This is where props become useful. Props allow you to send data from one component to another. They make components reusable, flexible, and easy to maintain.

Think of props as information that a parent component gives to a child component.

What are Props?

Props is short for Properties.

Props are used to pass data from a parent component to a child component. The child component receives the data and uses it to display different content.

Real-World Example

Imagine a teacher handing out report cards to students. The report card template is the same for everyone, but the information inside is different.

• Student Name
• Roll Number
• Marks
• Grade

The template is like a React component. The student information is like props. The same component can display different information depending on the props it receives.

Why Do We Use Props?

Without props, we would have to create a new component every time we wanted different content.

For example, instead of creating Product1, Product2, and Product3 components, we can create one ProductCard component and pass different product details using props.

Benefits of Props

• Reuse components
• Reduce duplicate code
• Make components flexible
• Improve code organization
• Make applications easier to maintain

Passing Props

The parent component passes data as attributes.

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

Here, name="John" is a prop.

Receiving Props

The child component receives the props as a parameter.

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

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

Output

Hello, John!

The Welcome component receives the value John and displays it.

Passing Multiple Props

A component can receive more than one prop.

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

function App() {
  return (
    <Student
      name="Amit"
      course="React"
      age="22"
    />
  );
}

Output

Amit
Course: React
Age: 22

This makes one component useful for displaying information about many different students.

Using Destructuring with Props

Instead of writing props.name, props.course, and props.age repeatedly, React developers often use destructuring.

function Student({ name, course, age }) {
  return (
    <div>
      <h2>{name}</h2>
      <p>Course: {course}</p>
      <p>Age: {age}</p>
    </div>
  );
}

This produces the same result but makes the code shorter and easier to read. Destructuring is commonly used in modern React applications.

Props are Read-Only

One important rule is that props cannot be changed by the child component. The child component can only read the values it receives.

function Welcome(props) {
  // Do not do this
  props.name = "Rahul";

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

The above code is incorrect because props are read-only. If the value needs to change, the parent component should provide a new value.

Passing Different Types of Data

Props are not limited to text. You can pass many different types of values.

String

<User name="John" />

Number

<Product price={999} />

Boolean

<Button disabled={true} />

Array

<List items={["Apple", "Mango", "Banana"]} />

Object

<User user={{ name: "John", age: 25 }} />

Function

<Button onClick={handleClick} />

This flexibility makes props extremely powerful.

Real-World Example

Imagine you are building an online shopping website. Instead of creating separate components for every product, you can create one reusable component.

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

function App() {
  return (
    <div>
      <ProductCard name="Wireless Mouse" price={999} />
      <ProductCard name="Keyboard" price={1499} />
      <ProductCard name="Monitor" price={12999} />
    </div>
  );
}

Output

Wireless Mouse
₹999

Keyboard
₹1499

Monitor
₹12999

Notice that the same component displays three different products simply by receiving different props.

Best Practices for Using Props

Here are some simple guidelines:

• Give props meaningful names.
• Keep components reusable.
• Use destructuring for cleaner code.
• Avoid modifying props inside child components.
• Pass only the data that a component actually needs.
• Keep components focused on a single responsibility.

Following these practices makes your React code easier to understand and maintain.

Summary

Props are one of the most important concepts in React because they allow components to communicate with each other. A parent component can send data to a child component using props, making the child component flexible and reusable.

Since props are read-only, they help keep applications predictable and easier to manage. Once you understand props, you can build dynamic user interfaces that display different data while using the same reusable components.

Key Takeaways

• Props stands for Properties.
• Props are used to pass data from a parent component to a child component.
• Props make components reusable and flexible.
• A component can receive one or many props.
• Props can store strings, numbers, arrays, objects, booleans, and functions.
• Props are read-only and should not be modified by child components.
• Destructuring props makes code cleaner and easier to read.
• Props are essential for building dynamic and reusable React applications.