React Fundamentals: Props (Properties)

Introduction

Props are one of the most important concepts in React. They allow components to communicate with each other by passing data from one component to another.

If components are the building blocks of React, then props are the connectors that make components dynamic and reusable.

In this article, you’ll learn what props are, how to use them, rules, examples, and interview points.

What are Props in React?

Props (short for Properties) are used to pass data from a parent component to a child component.

Props are:

• Read-only
• Immutable
• Passed as attributes

Example:

<Welcome name="Online Learner" />

How Props Work

Props follow a one-way data flow:

• Parent → Child
• Child cannot modify props

This makes React applications more predictable and easier to debug.

Using Props in Functional Components

Parent Component

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

Child Component

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

Output:

Welcome to React

Using Props with Destructuring

Destructuring makes code cleaner and more readable.

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

Passing Multiple Props

<User name="Shahid" role="Developer" experience={8} />

function User({ name, role, experience }) {
  return (
    <p>
      {name} is a {role} with {experience} years of experience.
    </p>
  );
}

Props in Class Components

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

Default Props

Default props are used when no value is passed.

function Button({ text = "Click Me" }) {
  return <button>{text}</button>;
}

Props vs State (Quick Comparison)

Common Mistakes with Props

• Trying to modify props
• Forgetting to pass required props
• Confusing props with state
• Not using destructuring

Props – Interview Quick Answer

What are props in React?

Props are read-only data passed from a parent component to a child component to make components reusable and dynamic.

Why Props Are Important

• Enable component reusability
• Make UI dynamic
• Maintain unidirectional data flow
• Improve maintainability