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;

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!

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! 🚀