React Props Explained: How to Pass Data to Components

In React, props (short for properties) are a way to pass data from one component to another.

Think of props like arguments to a function or labels on a gift box:

The parent component packs the gift (data).
The child component receives it and uses it.

This makes components reusable and dynamic.

How Props Work

Props are read-only (they cannot be changed by the child).
Props are passed from parent to child.
They allow customization of components.

Example 1: Passing Props

Parent Component

function App() {
  return (
    <div>
      <Welcome name="Arvinder" />
      <Welcome name="React Learner" />
      <Welcome name="Student" />
    </div>
  );
}

Child Component

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

Output:

Notice how the same component (Welcome) is reused with different props.

Example 2: Multiple Props

function Student(props) {
  return (
    <div>
      <h2>Name: {props.name}</h2>
      <p>Age: {props.age}</p>
      <p>Course: {props.course}</p>
    </div>
  );
}

function App() {
  return (
    <div>
      <Student name="John" age={21} course="Computer Science" />
      <Student name="Sara" age={22} course="Mathematics" />
    </div>
  );
}

Now each student component has its own name, age, and course.

Example 3: Props with Functions

You can even pass functions as props.

function Button(props) {
  return <button onClick={props.handleClick}>{props.label}</button>;
}

function App() {
  const sayHello = () => alert("Hello from Props!");
  
  return <Button label="Click Me" handleClick={sayHello} />;
}

Here, App passes a function as a prop, and the Button component executes it when clicked.

Example 4: Default Props

If a prop is not provided, you can give it a default value.

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

Welcome.defaultProps = {
  name: "Guest"
};

Usage:

Output:

Example 5: Prop Types (Type Checking)

React allows you to check the type of props using PropTypes.

import PropTypes from "prop-types";

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

Student.propTypes = {
  name: PropTypes.string.isRequired,
  age: PropTypes.number
};

name must be a string.
age must be a number.
If a wrong type is passed, React will give a warning in console.

Props vs State (Quick Difference)

Feature	Props	State
Who owns it?	Passed from parent	Managed inside component
Can modify?	Read-only	Can change with `setState` or Hooks
Use case	Customize a component (inputs)	Store and update data (dynamic behavior)