React Props

React props (short for properties) are how you pass data from a parent component to a child component. Props work like attributes on an HTML tag and like arguments to a function.

They let one component show different content each time it is used.

Passing Props

Add attributes when you use a component, and read them from the props object inside it.

function Card(props) {
  return <h3>{props.title} — {props.tech}</h3>;
}

export default function App() {
  return (
    <>
      <Card title="Chat App" tech="Node.js" />
      <Card title="Shop" tech="React" />
    </>
  );
}

Chat App — Node.js
Shop — React

Destructuring Props

Most developers destructure props directly in the parameter list. It is shorter and shows at a glance which props the component expects. You can also give default values.

function Badge({ label, color = 'gray', count = 0 }) {
  return (
    <span style={{ background: color }}>
      {label}: {count}
    </span>
  );
}

<Badge label="Inbox" color="teal" count={5} />
<Badge label="Spam" />

Inbox: 5   (teal background)
Spam: 0    (gray background)

Strings can be passed with quotes. Numbers, booleans, arrays, objects and functions must be wrapped in curly braces, like count={5}.

The children Prop

Anything you put between a component's opening and closing tags arrives as props.children. This is perfect for wrapper components such as panels, modals and layouts.

function Panel({ title, children }) {
  return (
    <section className="panel">
      <h2>{title}</h2>
      {children}
    </section>
  );
}

<Panel title="About">
  <p>I build web apps with React and Laravel.</p>
</Panel>

About
I build web apps with React and Laravel.

Props Are Read-Only

A component must never change its own props. Props belong to the parent. If a value needs to change over time, store it in state (covered later) and pass the new value down as a prop. This one-way data flow makes React apps predictable.

Passing Functions as Props

Parents can pass functions down so that children can report events back up. For example, <Button onPress={handleSave} /> lets the Button call handleSave when clicked, while the parent decides what saving means.

Frequently asked questions

What is the difference between props and state in React?

Props are passed in from a parent and are read-only inside the component. State is data a component owns and can update itself, which triggers a re-render.

How do I pass a number as a prop in React?

Wrap it in curly braces, for example <Rating value={4} />. Using quotes would pass the string "4" instead of the number.

Can a child component pass data to its parent?

Not directly. The parent passes a callback function as a prop, and the child calls that function with the data it wants to send up.