React Props

What Are Props?

Props, short for properties, are inputs to a component, similar to arguments passed into a function. A component receives all of its props bundled into a single object, and it must not modify that object — props are always read-only from the child's perspective.

function UserCard(props) {
  return (
    <div className="user-card">
      <h3>{props.name}</h3>
      <p>{props.role}</p>
    </div>
  );
}

function App() {
  return <UserCard name="Alex Kim" role="Product Designer" />;
}

export default App;

Destructuring Props

Rather than referencing props.name and props.role repeatedly, most React code destructures the props object right in the function signature. This makes the component's expected inputs easy to read at a glance.

function UserCard({ name, role }) {
  return (
    <div className="user-card">
      <h3>{name}</h3>
      <p>{role}</p>
    </div>
  );
}

function App() {
  return <UserCard name="Jordan Lee" role="Engineer" />;
}

export default App;

Default Values for Props

You can give a prop a fallback value using default parameter syntax in the destructuring pattern. The default is only used when the caller omits that prop entirely, or passes undefined.

function UserCard({ name, role = 'Team Member' }) {
  return (
    <div className="user-card">
      <h3>{name}</h3>
      <p>{role}</p>
    </div>
  );
}

function App() {
  // role defaults to 'Team Member' since it isn't passed
  return <UserCard name="Sam Lee" />;
}

export default App;

Passing Different Types of Props

Props aren't limited to strings. You can pass numbers, booleans, arrays, objects, and even functions as props, which lets a child component notify its parent about events like clicks.

• String props: name="Sam Lee" (quotes, no braces needed).
• Non-string props: age={29}, isActive={true}, tags={['admin', 'staff']} (wrapped in curly braces).
• Object props: address={{ city: 'Austin' }} (double braces: one for JSX, one for the object literal).
• Function props: onSave={handleSave}, letting a child call back into the parent.
• The special children prop, filled automatically from nested JSX content.

function ActionButton({ label, onActivate, disabled = false }) {
  return (
    <button onClick={onActivate} disabled={disabled}>
      {label}
    </button>
  );
}

function App() {
  function handleSave() {
    console.log('Saved!');
  }

  return <ActionButton label="Save" onActivate={handleSave} />;
}

export default App;

Mastering props is the foundation for building components that are reusable across your entire application, from simple buttons to full dashboard widgets.