Props

A component is a function. Props are its arguments. The parent passes them like HTML attributes; the child receives them as a single object.

Pass

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

Receive

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

props is always an object. The key is the attribute name; the value is what you passed.

Passing Non-String Values

For anything other than a string, use { }:

<Greeting name="Ada" age={36} admin={true} tags={["js", "react"]} />

• name="Ada" — string
• age={36} — number
• admin={true} — boolean
• tags={[...]} — array

For booleans, you can also use the shorthand:

<Greeting admin />     // same as admin={true}

Props Are Read-Only

A component must not mutate its props.

// ✗ Don't do this
function Bad(props) {
  props.name = "Whoever";   // mutating props
  return <p>{props.name}</p>;
}

Props belong to the parent. The child uses them, doesn’t change them. If you need a value that the child controls, that’s state (coming soon).

Props Aren’t Required to Match HTML

You can name props anything you want:

function Card({ title, body, footer }) { ... }

<Card
  title="Welcome"
  body="Sign up below"
  footer={<a href="/signup">Sign up</a>}
/>

Notice footer is JSX. Props can be any value — strings, numbers, arrays, objects, functions, and even other components.

Passing Functions

The most common pattern: the parent passes an onSomething handler, the child calls it when the event happens.

function App() {
  function handleClick() {
    console.log("clicked!");
  }
  return <SaveButton onClick={handleClick} />;
}

function SaveButton({ onClick }) {
  return <button onClick={onClick}>Save</button>;
}

Up Next

Always writing props.name, props.age gets old. Destructuring makes it cleaner.