1. Introduction

In React, applications are built using reusable components. Each component can represent a button, product card, navigation bar, user profile, or an entire page.

But how can one component send data to another component?

For example, suppose an e-commerce application displays multiple product cards. Each card needs different information, such as a product name, price, and image. Instead of creating a separate component for every product, we can create one reusable component and pass different data to it.

React provides Props (short for Properties) to accomplish this.

Props allow a parent component to pass data to a child component. They help developers create reusable, flexible, and maintainable user interfaces.

By the end of this tutorial, you will understand how props work and how to use them in practical React applications.

2. Learning Objectives

After completing this tutorial, you will be able to:

• Understand the meaning and purpose of props.

• Pass data from parent components to child components.

• Access props inside functional components.

• Use props destructuring.

• Pass strings, numbers, booleans, arrays, objects, and functions as props.

• Set default values for props.

• Use the special children prop.

• Understand the difference between props and state.

• Build reusable components using props.

3. Core Concepts and Explanation

3.1 What Are Props in React?

Props are inputs passed to a React component by its parent component.

Consider this example:

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

function App() {
  return <Welcome name="Rahul" />;
}

export default App;

Output:

Hello, Rahul!

Here is how the code works:

1. App is the parent component.

2. Welcome is the child component.

3. name="Rahul" passes a prop named name.

4. The Welcome component receives that value through its props parameter.

5. props.name accesses the value and displays it.

Props are similar to function arguments: they provide information a component needs to render its UI.

3.2 Parent and Child Components

A parent component renders or uses another component. The component being used is commonly called the child component.

Example:

function UserProfile(props) {
  return (
    <div>
      <h2>{props.name}</h2>
      <p>{props.role}</p>
    </div>
  );
}

function App() {
  return (
    <div>
      <UserProfile name="Amit" role="Developer" />
      <UserProfile name="Priya" role="Designer" />
    </div>
  );
}

export default App;

Output:

Amit
Developer

Priya
Designer

Both instances use the same UserProfile component, but each receives different props.

This is one of the main benefits of React: write a component once and reuse it with different data.

3.3 Props Destructuring

Instead of writing props.name and props.role repeatedly, you can extract the required values using JavaScript destructuring.

Example:

function UserProfile({ name, role }) {
  return (
    <div>
      <h2>{name}</h2>
      <p>{role}</p>
    </div>
  );
}

export default UserProfile;

The component receives the same props as before, but its parameter extracts name and role directly.

Both approaches are valid:

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

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

Destructuring is often preferred when a component uses several props because it improves readability.

3.4 Passing Different Data Types as Props

React props can carry different JavaScript values.

String props

<UserProfile name="Rahul" />

String values can be passed using quotes.

Number props

<Product price={999} />

Use curly braces to pass a number instead of a string.

Boolean props

<Notification isActive={true} />

A Boolean prop can also use the shorthand form:

<Notification isActive />

This passes true to isActive.

Array props

<SkillsList skills={["HTML", "CSS", "JavaScript"]} />

Object props

<UserCard
  user={{ name: "Amit", city: "Raipur" }}
/>

The child can access the object using user.name and user.city.

Function props

function ActionButton({ onAction }) {
  return <button onClick={onAction}>Click Me</button>;
}

function App() {
  function handleAction() {
    alert("Button clicked!");
  }

  return <ActionButton onAction={handleAction} />;
}

Function props allow child components to notify their parents about user interactions by calling a function supplied by the parent.

3.5 Default Values for Props

Sometimes a parent does not provide a particular prop. You can define a default value using parameter destructuring.

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

function App() {
  return (
    <div>
      <Welcome name="Amit" />
      <Welcome />
    </div>
  );
}

export default App;

Output:

Welcome, Amit!
Welcome, Guest!

The default value is used when name is undefined. If the parent passes null, the default value is not applied.

3.6 The Special children Prop

React provides a special prop named children. It represents the content placed between a component's opening and closing tags.

Example:

function Card({ children }) {
  return (
    <div className="card">
      {children}
    </div>
  );
}

function App() {
  return (
    <Card>
      <h2>Welcome to Param Classes</h2>
      <p>Learn React step by step.</p>
    </Card>
  );
}

export default App;

The content inside Card is passed to it through children.

This approach is useful for reusable cards, layouts, modal dialogs, and wrapper components.

3.7 Props Are Read-Only

Props should be treated as read-only inputs. A child component must not directly modify the props it receives.

Incorrect approach:

function User({ name }) {
  name = "Amit"; // Do not modify a prop
  return <h2>{name}</h2>;
}

Instead, pass the desired value from the parent:

function User({ name }) {
  return <h2>{name}</h2>;
}

function App() {
  return <User name="Amit" />;
}

If data needs to change over time, use an appropriate state-management approach. We will explore React state in the next tutorial.

3.8 Props vs State

Props	State
Passed into a component, usually by its parent.	Managed by a component or a state-management system.
Read-only from the receiving component's perspective.	Updated through the appropriate state setter or reducer.
Used to configure a component with data or callbacks.	Used to represent data that changes over time.
Changes when the parent supplies different values.	Updates can trigger a re-render.

Remember: props and state are different concepts, although both can influence what a component renders.

4. Practical Code Examples

Example 1: Creating a Reusable Product Card

Let's create a product card for an e-commerce application.

Step 1: Create ProductCard.jsx

function ProductCard({ name, price, category }) {
  return (
    <div className="product-card">
      <h2>{name}</h2>
      <p>Category: {category}</p>
      <p>Price: ₹{price}</p>
    </div>
  );
}

export default ProductCard;

Step 2: Use the component in App.jsx

import ProductCard from "./ProductCard";

function App() {
  return (
    <div>
      <h1>Our Products</h1>

      <ProductCard
        name="Wireless Headphones"
        price={1499}
        category="Electronics"
      />

      <ProductCard
        name="Smart Watch"
        price={2499}
        category="Wearables"
      />

      <ProductCard
        name="Bluetooth Speaker"
        price={999}
        category="Audio"
      />
    </div>
  );
}

export default App;

Expected output:

• Wireless Headphones — Electronics — ₹1499

• Smart Watch — Wearables — ₹2499

• Bluetooth Speaker — Audio — ₹999

All three cards use the same component. Their content changes because different props are passed by the parent.

Example 2: Passing an Array and Rendering a List

SkillsList.jsx

function SkillsList({ skills }) {
  return (
    <div>
      <h2>My Skills</h2>

      <ul>
        {skills.map((skill) => (
          <li key={skill}>{skill}</li>
        ))}
      </ul>
    </div>
  );
}

export default SkillsList;

App.jsx

import SkillsList from "./SkillsList";

function App() {
  const skills = ["HTML", "CSS", "JavaScript", "React"];

  return <SkillsList skills={skills} />;
}

export default App;

The skills array is passed as a prop. The child component uses map() to display each item. The key helps React identify list items.

Example 3: Passing an Object

UserCard.jsx

function UserCard({ user }) {
  return (
    <div>
      <h2>{user.name}</h2>
      <p>City: {user.city}</p>
      <p>Role: {user.role}</p>
    </div>
  );
}

export default UserCard;

App.jsx

import UserCard from "./UserCard";

function App() {
  const user = {
    name: "Neha",
    city: "Raipur",
    role: "Frontend Developer",
  };

  return <UserCard user={user} />;
}

export default App;

The parent passes the complete object using user={user}. The child accesses individual properties through user.name, user.city, and user.role.

Example 4: Passing a Function to a Child

App.jsx

function ActionButton({ onAction }) {
  return (
    <button onClick={onAction}>
      Show Message
    </button>
  );
}

function App() {
  function handleClick() {
    alert("Welcome to Param Classes!");
  }

  return <ActionButton onAction={handleClick} />;
}

export default App;

The parent defines handleClick and passes it to the child. When the button is clicked, the child invokes the supplied callback.

This is a common React pattern for handling interactions while keeping the parent responsible for the relevant behavior.

5. Real-World Applications

Props are widely used in professional React applications.

E-commerce applications

• Pass product names, prices, images, and ratings into product cards.

• Reuse the same card component across category and search pages.

Admin dashboards

• Pass labels, values, icons, and status information into statistic cards.

• Configure tables and reusable dashboard widgets.

Authentication interfaces

• Pass a user's display name or role to navigation components.

• Pass callbacks to login and logout buttons.

Reusable design systems

• Pass button labels, variants, disabled status, and click handlers.

• Configure cards, modals, badges, and form components without duplicating their structure.

The core principle is to keep components reusable and allow their parent to supply the data and behavior they need.

6. Common Mistakes and Best Practices

Common mistakes

Mistake 1: Forgetting curly braces for JavaScript values

Incorrect:

<ProductCard price="1499" />

This passes a string.

Correct when a number is intended:

<ProductCard price={1499} />

Mistake 2: Using the wrong prop name

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

The parent must provide a matching prop:

<Welcome userName="Rahul" />

Prop names are case-sensitive.

Mistake 3: Trying to modify props

Do not assign new values directly to received props. Pass updated values from the parent or use state where appropriate.

Mistake 4: Forgetting a list item's key

When rendering arrays with map(), provide a stable, unique key for each sibling item.

Mistake 5: Passing a function's result instead of its reference

For a click handler, write:

<ActionButton onAction={handleClick} />

This passes the function reference.

Writing onAction={handleClick()} invokes the function during rendering instead, which is usually not what you want for an event handler.

Best practices

• Use meaningful and consistent prop names.

• Prefer destructuring when it makes components easier to read.

• Keep components focused and reusable.

• Provide sensible defaults where appropriate.

• Treat props as immutable inputs.

• Pass only the data a component actually needs.

• Use callbacks to communicate child interactions to a parent.

• Add stable keys when rendering lists.

• Consider TypeScript or prop-validation techniques as projects grow.

7. Practice Exercises

Complete these exercises yourself before checking your understanding.

Exercise 1: Welcome Component

Create a Welcome component that accepts a name prop and displays:

Welcome to Param Classes, Rahul!

Exercise 2: Student Profile

Create a StudentProfile component that accepts:

• name

• course

• city

Render at least two student profiles using the same component.

Exercise 3: Product Cards

Create a reusable ProductCard component that accepts name, price, and category. Display three different products.

Exercise 4: Skills List

Pass an array of skills from App to a SkillsList component and display the skills using map().

Exercise 5: Callback Function

Create a parent component that passes a function to a child button. Clicking the button should display an alert.

Exercise 6: Default Props

Create a component that displays a person's name. If no name is provided, display Guest.

Exercise 7: Children Prop

Build a reusable Card component that accepts a heading and content through children.

Self-check questions

1. What are props in React?

2. How does a parent component pass data to a child?

3. Why should props be treated as read-only?

4. What is the benefit of destructuring props?

5. How can you pass an array or object as a prop?

6. What is the purpose of the children prop?

7. How are props different from state?

8. How can a child component trigger a function defined by its parent?

8. Key Takeaways and Conclusion

In this tutorial, you learned that:

• Props are inputs used to pass data from parent components to child components.

• Props make React components reusable and configurable.

• Props can contain strings, numbers, booleans, arrays, objects, and functions.

• Destructuring provides a concise way to access prop values.

• Default parameter values can provide fallbacks for missing props.

• The children prop allows components to wrap and display nested content.

• Props should be treated as read-only.

• Callback props let children invoke behavior supplied by their parents.

• Props and state serve different purposes in React.

Final takeaway: Props allow components to receive the information and behavior they need without duplicating component code. Mastering props is essential for building clean, maintainable React applications.