Props

Props (short for properties) are how React components receive data from their parent. They are the primary mechanism for making components reusable and configurable.

Passing and Receiving Props

You pass props as JSX attributes and receive them as an object argument in the component function:

function Greeting({ name, greeting }) {
  return <p>{greeting}, {name}!</p>;
}

function App() {
  return <Greeting name="Alice" greeting="Hello" />;
}

Using destructuring in the parameter list ({ name, greeting }) is the idiomatic way to access individual props.

Props are Read-Only

A component must never modify its own props. Props flow in one direction — from parent to child — and are immutable from the child's perspective. This one-way data flow makes React applications predictable and easy to debug.

Default Props

You can provide default values using JavaScript's default parameter syntax:

function Button({ label = "Click me", variant = "primary" }) {
  return <button className={`btn btn-${variant}`}>{label}</button>;
}

Passing Different Types as Props

Props can be strings, numbers, booleans, arrays, objects, or even functions. Non-string values must be passed inside curly braces:

<Card title="My Card" count={42} isActive={true} tags={["react", "js"]} />

Boolean props can be written as shorthand — is equivalent to .

The children Prop

The special children prop holds whatever is nested between a component's opening and closing tags:

function Card({ title, children }) {
  return (
    <div className="card">
      <h2>{title}</h2>
      <div className="card-body">{children}</div>
    </div>
  );
}

function App() {
  return (
    <Card title="Welcome">
      <p>This is the card content.</p>
    </Card>
  );
}

The children prop makes wrapper or layout components highly flexible.

Spreading Props

When you need to forward all props from one component to another (for example, wrapping a native element), you can use the spread operator:

function Input(props) {
  return <input className="styled-input" {...props} />;
}

This passes all received props (like type, value, onChange) through to the underlying element.

Understanding props gives you the ability to build flexible, reusable component libraries. Combined with state, they form the complete data model for any React application.