🔍 What Are Props in React?

In React, props (short for properties) are a way to pass data from one component to another, usually from a parent component to a child component. You can think of props like function arguments—they allow components to receive input and render dynamically based on that input. Props help you customize how a component looks or behaves without changing its internal logic, which is a core idea behind reusable UI components.

🤔 Why Use Props?

Props play a crucial role in building scalable React applications.

Data Sharing: Props enable a one-way data flow from parent to child components.
Reusability: The same component can be reused with different data.
Maintainability: Keeps components modular, predictable, and easy to manage.

⚙️ Example of Props Usage

Here’s a simple example that demonstrates how props work:

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

function App() {
  return <Greeting name="Balaji" />;
}

In this example, the App component passes a name prop to the Greeting component. The Greeting component receives it via props and renders dynamic content based on that value.

📊 Key Characteristics of Props

Feature	Description
Read-only	Props cannot be modified inside the child component.
Immutable	Their values remain the same unless the parent re-renders with new props.
Customizable	Enable components to render different UI based on passed values.

🔄 Passing Multiple Props

You can pass multiple values as props:

function UserCard({ name, role }) {
  return (
    <div>
      <h2>{name}</h2>
      <p>Role: {role}</p>
    </div>
  );
}

function App() {
  return <UserCard name="Balaji" role="React Developer" />;
}

Using destructuring makes props cleaner and easier to read.

⚖️ Props vs State

Aspect	Props	State
Data Flow	Passed from parent to child	Managed within the component
Mutability	Immutable	Mutable
Purpose	Configuration and data passing	Interactivity and dynamic behavior

✅ Common Use Cases for Props

Passing user data like name, role, or profile info
Conditionally rendering UI (show/hide components)
Customizing UI elements (button labels, colors, themes)
Rendering dynamic lists from arrays
Passing callback functions for event handling

🧠 Final Thoughts

Props are one of the foundational concepts in React. They enable clean data flow, encourage component reusability, and help you build flexible UIs that scale well. Once you clearly understand how props move through components, writing clean, maintainable, and reusable React code becomes much easier.

What Are Props in React? A Beginner-Friendly Guide