DEV Community

Cover image for React Mastery Series – Day 6: Props in React – Passing Data Between Components
Siva Samanthapudi
Siva Samanthapudi

Posted on

React Mastery Series – Day 6: Props in React – Passing Data Between Components

#webdev #react #reactjsdevelopment

Welcome back to the React Mastery Series!

So far, we've learned:

  • What React is
  • Why React was created
  • Setting up a React project
  • Understanding JSX
  • Building reusable components

In the previous article, we learned that components are the building blocks of every React application.

However, a component that always displays the same content isn't very useful.

Imagine an e-commerce website displaying hundreds of products. Creating a separate component for every product would result in repetitive code that's difficult to maintain.

Instead, React provides Props, allowing us to reuse the same component with different data.

What are Props?

Props (short for Properties) are read-only values passed from a parent component to a child component.

Think of props as function arguments.

Just as a function behaves differently depending on the arguments passed to it, a React component can render different content based on the props it receives.

Example:

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

function App() {
  return (
    <>
      <Welcome name="Siva" />
      <Welcome name="John" />
      <Welcome name="Emma" />
    </>
  );
}
Enter fullscreen mode Exit fullscreen mode

Output:

Hello, Siva!
Hello, John!
Hello, Emma!
Enter fullscreen mode Exit fullscreen mode

The same component is reused three times with different data.

How Props Work

Props create a one-way data flow.

Parent Component
        │
        │ Props
        ▼
Child Component
Enter fullscreen mode Exit fullscreen mode

The parent sends data.

The child receives data.

The child cannot modify the props it receives.

This predictable data flow is one of React's greatest strengths.

Why Do We Need Props?

Imagine building an online shopping application.

Without props:

<ProductCard />
<ProductCard />
<ProductCard />
<ProductCard />
Enter fullscreen mode Exit fullscreen mode

Each component would display identical information.

With props:

<ProductCard
  name="Wireless Mouse"
  price={799}
/>

<ProductCard
  name="Mechanical Keyboard"
  price={3499}
/>

<ProductCard
  name="Monitor"
  price={12999}
/>
Enter fullscreen mode Exit fullscreen mode

Now one reusable component can display unlimited products.

Passing Different Types of Props

Props can hold almost any JavaScript value.

String 

<User name="Siva" />
Enter fullscreen mode Exit fullscreen mode

Number 

<Product price={4999} />
Enter fullscreen mode Exit fullscreen mode

Boolean 

<Button disabled={true} />
Enter fullscreen mode Exit fullscreen mode

Array 

<Skills
  skills={["React", "TypeScript", "Node.js"]}
/>
Enter fullscreen mode Exit fullscreen mode

Object 

<User
  user={{
    name: "Siva",
    city: "Dubai"
  }}
/>
Enter fullscreen mode Exit fullscreen mode

Function

Functions are frequently passed as props to allow child components to communicate with their parent.

<Button onClick={handleSave} />
Enter fullscreen mode Exit fullscreen mode

We'll explore this in more detail when discussing event handling.

Destructuring Props

Instead of repeatedly writing props.name, React developers often destructure props.

Instead of:

function User(props) {
  return <h2>{props.name}</h2>;
}
Enter fullscreen mode Exit fullscreen mode

Use:

function User({ name }) {
  return <h2>{name}</h2>;
}
Enter fullscreen mode Exit fullscreen mode

This approach is shorter and easier to read.

Props are Read-Only

One of the most important React rules is:

Never modify props inside a child component.

❌ Incorrect:

function User({ name }) {
  name = "Admin";

  return <h2>{name}</h2>;
}
Enter fullscreen mode Exit fullscreen mode

React expects props to remain immutable.

If data needs to change, the parent component should update it and pass the new value down.

Passing Multiple Props

Components often require more than one piece of information.

Example:

<ProductCard
  name="Laptop"
  brand="Dell"
  price={74999}
  rating={4.8}
/>
Enter fullscreen mode Exit fullscreen mode

Child component:

function ProductCard({
  name,
  brand,
  price,
  rating
}) {
  return (
    <>
      <h2>{name}</h2>
      <p>{brand}</p>
      <p>₹{price}</p>
      <p>{rating} ⭐</p>
    </>
  );
}
Enter fullscreen mode Exit fullscreen mode

The children Prop

One of the most powerful features in React is the special children prop.

Anything placed between a component's opening and closing tags becomes its children.

Example:

<Card>
  <h2>Welcome!</h2>
  <p>Learning React is fun.</p>
</Card>
Enter fullscreen mode Exit fullscreen mode

Component:

function Card({ children }) {
  return (
    <div className="card">
      {children}
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

This makes components highly flexible and reusable.

Default Props

Sometimes a prop may not be provided.

You can define default values using JavaScript default parameters.

function Welcome({
  name = "Guest"
}) {
  return <h2>Hello, {name}</h2>;
}
Enter fullscreen mode Exit fullscreen mode

Now:

<Welcome />
Enter fullscreen mode Exit fullscreen mode

renders:

Hello, Guest
Enter fullscreen mode Exit fullscreen mode

Real-World Example

Imagine a banking dashboard displaying multiple accounts.

Instead of creating separate components:

<SavingsAccount />
<SalaryAccount />
<BusinessAccount />
Enter fullscreen mode Exit fullscreen mode

Create one reusable component:

<AccountCard
  accountName="Savings"
  balance={15400}
/>

<AccountCard
  accountName="Salary"
  balance={83000}
/>

<AccountCard
  accountName="Business"
  balance={270500}
/>
Enter fullscreen mode Exit fullscreen mode

One component, many use cases.

This is exactly how enterprise React applications are built.

Common Mistakes

Modifying Props

Props should never be changed by the child component.

Passing Too Many Props

If a component receives 15–20 props, consider grouping related data into an object or redesigning the component.

Using Props Instead of State

Props are passed from the parent.

State is owned and managed by the component.

We'll explore state in the next article.

Forgetting Destructuring

Destructuring keeps components cleaner and more readable, especially when several props are involved.

Best Practices

  • Treat props as immutable.
  • Keep component APIs simple.
  • Use descriptive prop names.
  • Pass only the data a component actually needs.
  • Use the children prop for flexible layouts.
  • Prefer composition over creating dozens of specialized components.

Key Takeaways

Today, we learned:

✅ Props allow data to flow from parent to child.
✅ Props are read-only and should never be modified.
✅ Props can hold strings, numbers, objects, arrays, booleans, and functions.
✅ The children prop enables highly reusable layouts.
✅ Designing clean component APIs improves maintainability and scalability.

What's Next? 🚀

In Day 7, we'll cover one of the most fundamental concepts in React:

State in React – Making Components Dynamic

We'll explore:

  • What state is
  • Why state exists
  • The useState Hook
  • Updating state correctly
  • State batching
  • Common pitfalls
  • Real-world examples

By the end of the next article, you'll understand the difference between Props and State, two concepts that every React developer must master.

Happy Coding! 🚀

Top comments (1)

Collapse
 
aditya_sorathiya_069252f4 profile image
Aditya Sorathiya •

Hi Siva,

I recently came across your React Mastery Series on DEV, especially the article on React Props. I'm a student developer from India and I'm currently building a project called PasteDB while learning React and FastAPI. I really enjoyed your explanations and wanted to say thanks for sharing them. Looking forward to reading the rest of the series!