ReactJS Props

When you build components in React application, one of the most important concepts you must understand is Props. Props determine how data flows between components, how you make components reusable, and how you customize UI elements without rewriting the same component again and again. Think of props as inputs that a component receives from outside.

What Are Props in React?

Props, short for “properties,” are immutable(read-only) values that a component receives from its parent to display or configure data.
They allow you to pass data from parent → child so that you can build flexible, reusable components.

A very easy way to understand props:

• State is for data inside a component.
• Props are for data coming into a component.

Props allow your component to:

• Receive values
• Receive functions
• Receive JSX
• Receive arrays, objects, and complex structures

Think of props like:

• Arguments to a function
• Attributes in HTML
• Configurations for reusable components

How to Pass Props (Parent → Child)

In React, data always flows in one direction — from parent components down to child components. This pattern is called unidirectional data flow, and it makes React apps predictable and easy to debug.

Whenever a parent component wants to give information to a child component, it sends that data through props. The child component then receives those values and uses them inside its JSX.

Functional Component Example

function App() {
  return (
    <UserCard name="John" age=25 />
  );
}

• name="John"
• age=20

function UserCard({ name, age }) {
  return (
    <div>
      <h3>{name}</h3>
      <p>{age}</p>
    </div>
  );
}

What’s happening here?

• App is the parent component
• UserCard is the child component
• name and age are passed as props
• The child receives and displays them

Class Component Example

import React, { Component } from "react";
import UserCard from "./UserCard";

class App extends Component {
  render() {
    return (
      <UserCard 
        name="John" 
        age=25 
      />
    );
  }
}

export default App;

• App is a class component that extends Component
• Data (name and age) is passed to UserCard as props
• Props are written like HTML attributes

In class components, props are accessed using this.props.

import React, { Component } from "react";

class UserCard extends Component {
  render() {
    return (
      <div>
        <h3>{this.props.name}</h3>
        <p>{this.props.age}</p>
      </div>
    );
  }
}

export default UserCard;

• this.props.name → gets "John"
• this.props.age → gets 25
• Props are read-only (cannot be changed inside the child)

Passing Different Types of Props

Props are not limited to strings. You can pass any JavaScript value.

String Props

<Title text="React Tutorial" />

Number Props

<Counter start={10} />

Boolean Props

<Button disabled={true} />

Array Props

<UserList users={["Ammy", "Sara", "John"]} />

function UserList({ users }) {
  return (
    <ul>
      {users.map((user) => (
        <li key={user}>
          {user}
        </li>
      ))}
    </ul>
  );
}

Object Props

<Profile data={{ name: "John", age: 26 }} />

function Profile({ data }) {
  return (
    <p>
      {data.name} - {data.age}
    </p>
  );
}

Default Props (Fallback Values)

Sometimes a prop might not be passed.
Default values help avoid undefined behavior.

function Avatar({ size = 50 }) {
  return (
    <img 
      width={size} 
      height={size} 
    />
  );
}

class Avatar extends React.Component {
  static defaultProps = {
    size: 50
  };

  render() {
    return (
      <img 
        width={this.props.size} 
        height={this.props.size} 
      />
    );
  }
}

Real-World Example: Reusable Product Card

function ProductCard({ name, price, inStock }) {
  return (
    <div className="product-card">
      <h3>{name}</h3>
      <p>₹{price}</p>
      <span>
        {inStock ? "Available" : "Out of Stock"}
      </span>
    </div>
  );
}

Usage:

<ProductCard name="Laptop" price={55000} inStock={true} />
<ProductCard name="Phone" price={30000} inStock={false} />

The same component displays different data using props.

Summary

Props are a core concept that define how data flows through a React application. They allow parent components to pass information, configuration, and behavior to child components in a predictable and controlled way.

By using props, developers can build reusable components that adapt to different data without changing their internal logic. Understanding props also reinforces React’s one-way data flow model, which keeps applications easier to debug and maintain.

Once props are clear, it becomes much easier to understand component communication, event handling, and the important distinction between state and props, which is the next essential step in mastering React.