Understanding Props in React: A Guide to Passing Data

In React, props (short for properties) are used to pass data from a parent component to a child component. They are one of the most fundamental concepts in React and are essential for building reusable and dynamic user interfaces.

What Are Props?

Think of React components like JavaScript functions:

• Components = functions

• Props = function arguments

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

Usage:

<Greeting name="Ravi" />

Here, "Ravi" is passed as a prop from the parent to the Greeting component.

Why Props Are Important

Props help you:

• Reuse components with different data

• Keep your UI flexible

• Separate logic from presentation

Without props, components would be static and not very useful.

Example: Passing Props from Parent to Child

Let’s build a practical example using a ProductList and Product component.

Parent Component (ProductList)

function ProductList() {
  const product = {
    id: 1,
    title: "MacBook Pro",
    description: "Powerful laptop for developers",
    votes: 120,
    productImageUrl: "https://via.placeholder.com/150"
  };

  return (
    <div className="ui unstackable items">
      <Product
        id={product.id}
        title={product.title}
        description={product.description}
        votes={product.votes}
        productImageUrl={product.productImageUrl}
      />
    </div>
  );
}

Child Component (Product)

function Product(props) {
  return (
    <div className="item">
      <h2>{props.title}</h2>
      <p>{props.description}</p>
      <img src={props.productImageUrl} alt={props.title} />
      <p>Votes: {props.votes}</p>
    </div>
  );
}

How Props Work

Each attribute passed:

title={product.title}

means:

“Send product.title to the child as a prop named title”

Inside the child component, it becomes:

props.title

Cleaner Approach Using Destructuring

Instead of using props.title, we can destructure:

function Product({ title, description, votes, productImageUrl }) {
  return (
    <div className="item">
      <h2>{title}</h2>
      <p>{description}</p>
      <img src={productImageUrl} alt={title} />
      <p>Votes: {votes}</p>
    </div>
  );
}

This is the modern and recommended approach

Passing Multiple Props Easily (Spread Operator)

Instead of writing many props manually:

<Product {...product} />

This automatically passes all properties of the object.

One-Way Data Flow

React follows one-way data flow:

Parent ➝ Child

Child cannot modify props

Props are read-only (immutable).

Rendering Multiple Components with Props

function ProductList() {
  const products = [
    { id: 1, title: "MacBook", votes: 100 },
    { id: 2, title: "iPhone", votes: 200 }
  ];

  return (
    <div>
      {products.map((product) => (
        <Product key={product.id} {...product} />
      ))}
    </div>
  );
}

Conditional Rendering with Props

You can change UI based on props:

function Product({ votes }) {
  return (
    <div>
      {votes > 150 && <span>🔥 Popular Product</span>}
    </div>
  );
}