Understanding Props in React

Introduction

After learning conditional rendering, I started wondering how React components share data with each other.

For example, suppose I have a Welcome component.

Instead of hardcoding the same text every time, how can I display a different name for each user?

The answer is props.

Props allow a parent component to pass data to a child component, making components more reusable and flexible.

In this article, I'll explain what props are, how they work, and when to use them.

What are Props?

Props is short for properties.

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

In React, data flows from a parent component to a child component through props.

Think of props like function parameters.

Just as a function accepts values as parameters, a React component accepts values through props.

Parent → Child Data Flow

Props flow in one direction — from a parent component to a child component.

• Parent sends data.
• Child receives and displays it.
• Child cannot change the props.

Parent Component
       │
       │ props
       ▼
Child Component

Passing a Single Prop

Parent Component

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

Child Component

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

Output

Hello Srav

Passing Multiple Props

Parent

function App() {
  return (
    <Welcome
      name="Srav"
      age={10}
      city="Auckland"
    />
  );
}

Child

function Welcome(props) {
  return (
    <>
      <h2>{props.name}</h2>
      <p>{props.age}</p>
      <p>{props.city}</p>
    </>
  );
}

Output

Srav
10
Auckland

Props are Read-only

Props cannot be changed inside the child component.

The parent owns the data.

Wrong

function Welcome(props) {
  props.name = "Srav";
}

Correct

The parent should pass a different value.

<Welcome name="Srav" />

Destructuring Props

Destructuring lets you access props directly without writing props. every time.

Instead of writing:

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

Use destructuring:

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

For multiple props:

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

Destructuring makes the code shorter, cleaner, and easier to read.

Props vs Variables

Example:

function Welcome({ name }) {

  const country = "New Zealand";

  return (
    <>
      <h2>{name}</h2>
      <p>{country}</p>
    </>
  );
}

Here:

• name → comes from the parent as a prop.
• country → is a local variable created inside the component.

Props vs State

We'll explore state in the next article.

When should you use Props?

• Passing data to child components
• Making components reusable
• Customizing UI
• Sharing information between components
• Passing event handler functions to child components

Conclusion

Props are one of the fundamental concepts in React because they allow components to communicate with each other.

They make components more reusable by allowing the same component to display different data without changing its internal code.

Understanding how props work is an important step toward building modular and maintainable React applications.

As I continue learning React, I'm seeing how breaking an application into smaller components and passing data through props makes the code much easier to understand and reuse.

Key Takeaways

• Props are used to pass data from a parent component to a child component.
• Props are read-only and should not be modified by the child component.
• Components become more reusable by receiving different props.
• Props can contain strings, numbers, booleans, objects, arrays, functions, or even JSX.
• Props help components communicate while keeping responsibilities separate.
• Props can be destructured to make the code cleaner.

What's Next?

Now that I understand how components receive data through props, the next step is learning how components manage their own changing data using state.

In the next article, I'll explore React state and learn how it allows components to update the UI when data changes.

Thanks for reading, and happy coding!