How to Pass Props in React

Props are the values a parent component passes to a child component in React. You pass props by writing them as JSX attributes on the child's tag. The parent decides each value, and the child receives it as a read-only input.

Pass props from the parent

To send a value down, write it as an attribute on the child's tag. This App component passes a name to a Greeting component:

App.jsx

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

The word name is the prop name, and "Maya" is its value. The child receives both.

You can pass any JavaScript value, not only strings. Numbers, booleans, arrays, and objects all work, and non-string values go inside curly braces:

App.jsx

function App() {
  return (
    <Product
      name="Desk lamp"
      price={39}
      tags={["home", "lighting"]}
    />
  );
}

The Product component now receives three props with three different types.

What props can hold

A prop is a plain JavaScript value, so almost anything fits. Strings are the only values you can pass without curly braces:

The double curly braces around an object are an object literal inside a JSX expression, not a special syntax. Everything except a plain string goes inside braces.

Read props in the child

The child component receives all props as a single object. Destructure the ones you need inside the parameter list:

App.jsx

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

Given the name prop "Maya", the browser shows a heading that says "Hello, Maya."

You can also accept the whole object and read properties from it, which is useful when a component forwards many props:

App.jsx

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

Both versions do the same thing. Destructuring is the common choice because it names the props you expect up front. It also keeps defaults and unused props visible in one place.

Set a default value

A prop is undefined when the parent does not pass it. Give it a fallback by adding a default in the destructuring:

App.jsx

function Greeting({ name = "Guest" }) {
  return <h1>Hello, {name}</h1>;
}

Now a Greeting with no name prop shows "Hello, Guest." The default only applies when the prop is missing or undefined, not when you pass null or zero.

Pass a function to update data

Props can carry functions as well. A child that must change a parent's value receives a handler and calls it:

App.jsx

function AddButton({ onAdd }) {
  return <button onClick={onAdd}>Add item</button>;
}

The parent owns the logic and passes it down. The child only triggers it, which keeps data flowing one way while still letting children respond to interaction. You will use this pattern constantly once components start holding state.

Keep props read-only

A child should never assign to a prop. This is the pattern to avoid:

App.jsx

function Greeting({ name }) {
  name = name.toUpperCase();
  return <h1>Hello, {name}</h1>;
}

Mutating a prop has no effect on the parent and breaks the one-way data flow. If a child needs to change a value, the parent owns that value and passes a way to update it down. That idea is called lifting state up.

What to learn next

See how props differ from state, then learn to lift shared values up to the parent so they can be updated in one place.