What are props in React

Introduction

Props let you pass information from one component to another in React. They help components share data and work together.

You want to show a user's name inside a greeting component.

You need to customize a button's label and color from outside the button component.

You want to reuse a card component but show different content each time.

You want to send a number to a counter component to start counting from that number.

Syntax

React

function ComponentName(props) {
  return <div>{props.someValue}</div>;
}

// Usage
<ComponentName someValue="Hello" />

Props are read-only inside the component receiving them.

Props are passed like HTML attributes when using a component.

Examples

This shows a greeting with the name passed as a prop.

React

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

<Welcome name="Alice" />

The button's label and color come from props.

React

function Button(props) {
  return <button style={{ backgroundColor: props.color }}>{props.label}</button>;
}

<Button label="Click me" color="blue" />

This uses destructuring to get props directly.

React

function Message({ text }) {
  return <p>{text}</p>;
}

<Message text="Welcome to React!" />

Sample Program

This app shows two greetings with different names passed as props.

React

import React from 'react';

function Greeting(props) {
  return <h2>Hello, {props.user}!</h2>;
}

export default function App() {
  return (
    <div>
      <Greeting user="Sam" />
      <Greeting user="Lee" />
    </div>
  );
}

Important Notes

Props cannot be changed inside the component that receives them.

Use props to make components reusable and flexible.

Summary

Props pass data from parent to child components.

They are like function arguments for components.

Props help components show different content without rewriting code.