Next ❯

Props in React

  • This lesson introduces props in React and explains how they are used to pass data between components.

  • Topic Overview

    Props and State are core concepts in React that control data and behavior of components.
    Understanding these concepts is essential before moving to advanced React topics.

    Props in React

    Props (short for properties) are used to pass data from one component to another.

    In simple words:
    Props are used to send data from parent component to child component.

    What are Props?

    Props are:

    • Read-only

    • Passed as attributes

    • Used to make components dynamic

    Example:

<Greeting name="React" />

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

  • name is a prop.

    Passing Props to Components

    Props are passed like HTML attributes.

    Parent Component:

<User age={21} />
  • Child Component:

function User(props) {
  return <p>Age: {props.age}</p>;
}

  • Props help reuse components with different data.

    Props Read-Only Nature

    Props cannot be changed inside the child component.

    ❌ This is NOT allowed:

props.name = "New Name";

  • Props are immutable.

    Why?

    • Prevents unexpected behavior

    • Keeps data flow predictable

    • Improves debugging

    Props with Default Values

    Default props are used when no value is passed.

    Example:

function Button({ text = "Click" }) {
  return <button>{text}</button>;
}
  • If text is not passed, default value is used.
Next ❯