Understanding React Props

What are Props?

In React, props (short for properties) are used to pass data from one component to another, primarily from parent to child components.

Why Use Props?

• To make components reusable and dynamic.
• To transfer data between components.
• To render different outputs based on different inputs.

Example - Passing Props

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

  // Usage
  <Welcome name="Rohan" />
  

Destructuring Props

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

  <Welcome name="Anjali" />
  

How Props Work?

1. Parent component sends data using HTML-like attributes.
2. Child component receives them as an object called props.

Default Props

  function Welcome({ name = "Guest" }) {
    return <h1>Hello, {name}!</h1>;
  }
  

Read-only Nature of Props

Props are immutable (cannot be changed by the child). If changes are needed, the parent must pass new props.

Props vs State

• Props: Passed from parent to child. Read-only.
• State: Maintained within the component itself. Mutable via hooks like useState.

Use Cases

• Passing dynamic data (e.g., user's name, age)
• Conditionally rendering components
• Rendering lists with dynamic data

Important Notes

• Props improve reusability.
• They enable component composition.

Conclusion

Props make React components dynamic, reusable, and more adaptable to various data inputs without changing their structure.