SyntaxShelf

Pass props

2 snippets in React

Also written as pass all props

REReact

Props

RE · Components
Syntax
function Component({ propA, propB }) { ... }
// or
function Component(props) {
  const { propA, propB } = props;
}
Example
function UserCard({ username, role, isActive }) {
  return (
    <div>
      <strong>{username}</strong>
      <span>{role}</span>
      {isActive && <span>Online</span>}
    </div>
  );
}
Output
Renders the user card with username, role, and optional online badge.

Note Props are read-only. Never mutate a prop directly inside a component. Destructuring in the parameter list is the most common pattern.

Spread Attributes

RE · JSX
Syntax
<Component {...propsObject} />
Example
function FormField({ label, ...inputProps }) {
  return (
    <div className="field">
      <label>{label}</label>
      <input {...inputProps} />
    </div>
  );
}

// Usage: all standard input attributes are forwarded
<FormField
  label="Email"
  type="email"
  placeholder="[email protected]"
  required
/>

Note Spread is great for forwarding props. Be careful: it can pass unintended attributes to DOM elements. Destructure known props first, then spread the rest.

Frequently asked questions

How do you pass props?
React covers this with 2 copy-ready snippets on this page. The "Props" snippet in React uses `function Component({ propA, propB }) { ... }`.
Which code does the React example use?
The "Props" snippet uses `function Component({ propA, propB }) { ... }`, from the Components section of the React cheat sheet.
What other React snippets are shown for "pass props"?
Besides "Props", this page also shows "Spread Attributes".
Is there anything to watch out for?
Yes. For "Props": Props are read-only. Never mutate a prop directly inside a component. Destructuring in the parameter list is the most common pattern.

Browse all tasks by intent