Pass props

2 snippets in React

Also written as pass all props

REReact

Props

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.