What are props in React?

In React, props (short for properties) are read-only inputs that are passed from a parent component to a child component. They allow components to be reusable and dynamic by enabling data and configurations to flow down the component tree.

Think of props like function parameters:

• A component is like a function.
• Props are the arguments you pass into it.

🔹 Key Points about Props:

1. Immutable (Read-only) – A child component cannot change its props; they are controlled by the parent.
2. Passed down from parent to child – Data always flows top → down (unidirectional data flow).
3. Allow reusability – You can pass different values into the same component to render dynamic content.
4. Any type of data – Props can be strings, numbers, arrays, objects, or even functions.

🔹 Example: Using Props

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

// Parent Component
function App() {
  return (
    <div>
      <Greeting name="Himanshu" />
      <Greeting name="Anita" />
      <Greeting name="John" />
    </div>
  );
}

✅ Output:

Hello, Himanshu!
Hello, Anita!
Hello, John!

Here:

• The App component passes name as a prop to Greeting.
• Greeting uses {props.name} to display different names.

👉 In short: Props are the way components communicate with each other in React, by passing data from parent to child.