~//tutorials/react/react-props/edit

~ Contribute

Suggest a correction or improvement. The author reviews it before it goes live.

Comment0 / 300

en/tutorials/react/4react-props

# Props

Props (properties) let you pass data from a parent component to a child component. They are the primary way components communicate.

## Passing Props

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

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

Props flow **one direction** — parent to child, never the other way.

## Destructuring Props

Destructure in the parameter for cleaner code:

```jsx
// Instead of: function User(props) { props.name }
function User({ name, age }) {
  return <p>{name} is {age} years old.</p>;
}
```

## Default Props

Use default values in destructuring:

```jsx
function Button({ text = "Click me", color = "blue" }) {
  return <button style={{ color }}>{text}</button>;
}
```

If no prop is passed, the default is used.

## The `children` Prop

Anything between a component's tags becomes `children`:

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

<Card title="Info">
  <p>This is the card content.</p>
</Card>
```

## Props Are Read-Only

A component must never modify its own props:

```jsx
// ❌ Never do this
function User({ name }) {
  name = "Bob"; // Don't mutate props
  return <p>{name}</p>;
}
```

Props are **immutable**. Create new values instead.

## Passing Any Type

Props can be any JavaScript value:

```jsx
<User name="Alice" age={30} isAdmin={true} items={[1, 2, 3]} />
```

Strings use quotes; everything else uses `{}`.

## Best Practices

1. **Destructure props** — Cleaner and more readable
2. **Use default values** — Handle missing props gracefully
3. **Keep props minimal** — Don't pass more than needed
4. **Name props clearly** — `isActive` not `flag`

## Common Mistakes

1. **Mutating props** — Props are read-only; never change them
2. **Using quotes for non-strings** — `{age={30}}` should be `{age={30}}` in JSX, not `age="30"`
3. **Forgetting children** — `children` is just another prop
4. **Too many props** — If a component needs 8+ props, split it up

No changes yet

cancel