DEV Community

Cover image for Understanding React Props: A Beginner-Friendly Guide
Ruturaj Jadhav
Ruturaj Jadhav

Posted on

Understanding React Props: A Beginner-Friendly Guide

If you're learning React, you might have come across the term props. But what exactly are they, and why do we use them? Let’s break it down in the simplest way possible.

What Are Props?

Props (short for properties) are a way to pass data from one component to another in React. They help make components reusable by allowing them to receive different values.

How to Use Props in React

Using props in React is a three-step process:

  1. Pass props to a component
  2. Receive props in the child component
  3. Use props inside the component

example

import React from "react";

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

function App() {
  return (
    <div>
      <Greeting name="Ruturaj" />
      <Greeting name="Parth" />
      <Greeting name="Aniruddha" />
    </div>
  );
}

export default App;
Enter fullscreen mode Exit fullscreen mode

What’s Happening Here?

The Greeting component receives a prop called name.
Inside the Greeting component, we use {props.name} to display the value.
The App component passes different names ("Ruturaj", "Parth", "Aniruddha") as props.

The output will be:

Hello, Ruturaj!
Hello, Parth!
Hello, Aniruddha!
Enter fullscreen mode Exit fullscreen mode

Why Use Props?

✅ Reusability – Props help create reusable components, reducing code duplication.
✅ Flexibility – Components become dynamic as they can accept different values.
✅ Unidirectional Data Flow – Keeps data flow simple and predictable.

Conclusion

Props are an essential part of React that allow you to pass data between components efficiently. Understanding how to use them correctly will make your components more reusable and maintainable.

Do you have any questions about React props? Drop a comment below! 🚀

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay