React Props

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.

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.

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.