React Props

Passing data between components

📦 What are Props?

Props (properties) are arguments passed to React components. They work like function parameters, allowing you to pass data from parent to child components, making components dynamic and reusable. 


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

<Welcome name="Sarah" />

Props Characteristics

🔒

Read-Only

Props cannot be modified by child component 

// ❌ Don't do this
props.name = "New";
⬇️

One-Way Flow

Data flows from parent to child only 

<Parent>
  <Child data={value} />
</Parent>
🎨

Any Data Type

Pass strings, numbers, objects, functions 

<User 
  name="John"
  age={25}
/>
🔄

Dynamic Content

Make components flexible and reusable 

<Button text="Click" />
<Button text="Submit" />

🔹 Basic Props Usage

Props are passed to components like HTML attributes. Access them using the props parameter in function components. 

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

function App() {
  return (
    <div>
      <Greeting name="Alice" />
      <Greeting name="Bob" />
      <Greeting name="Charlie" />
    </div>
  );
}

Output:

Hello, Alice!

Hello, Bob!

Hello, Charlie!

🔹 Multiple Props

Components can receive multiple props of different types. Use curly braces for non-string values like numbers, booleans, or objects. 

function UserCard(props) {
  return (
    <div>
      <h2>{props.name}</h2>
      <p>Age: {props.age}</p>
      <p>Role: {props.role}</p>
    </div>
  );
}

function App() {
  return (
    <UserCard 
      name="John Doe" 
      age={28} 
      role="Developer" 
    />
  );
}

Output:

John Doe

Age: 28

Role: Developer

🔹 Props with Objects

You can pass entire objects as props, making it easier to manage related data together. 

function ProductCard(props) {
  return (
    <div>
      <h3>{props.product.name}</h3>
      <p>Price: ${props.product.price}</p>
      <p>Stock: {props.product.stock} units</p>
    </div>
  );
}

function App() {
  const product = {
    name: "Laptop",
    price: 999,
    stock: 15
  };

  return <ProductCard product={product} />;
}

Output:

Laptop

Price: $999

Stock: 15 units

🔹 Default Props

Set default values for props in case they are not provided by the parent component. 

function Button(props) {
  return (
    <button style={{ 
      backgroundColor: props.color,
      padding: '10px 20px',
      border: 'none',
      borderRadius: '4px',
      color: 'white'
    }}>
      {props.text}
    </button>
  );
}

// Set default props
Button.defaultProps = {
  color: 'blue',
  text: 'Click Me'
};

function App() {
  return (
    <div>
      <Button />
      <Button color="green" text="Submit" />
    </div>
  );
}

Output:

🔹 Props in Class Components

In class components, access props using this.props instead of the props parameter. 

class Welcome extends React.Component {
  render() {
    return (
      <div>
        <h1>Welcome, {this.props.name}!</h1>
        <p>You are {this.props.age} years old.</p>
      </div>
    );
  }
}

// Usage
<Welcome name="Emma" age={25} />

Output:

Welcome, Emma!

You are 25 years old.

🔹 Important Props Rules

Remember these key points when working with props:

  • Read-Only: Never modify props inside a component
  • Strings: Pass strings directly: name="John"
  • Other Types: Use curly braces: age={25}
  • Naming: Use camelCase for prop names
  • Validation: Consider using PropTypes for type checking

🧠 Test Your Knowledge

Can you modify props inside a component?