Passing data with props

Passing data with props

Props (short for properties) are the inputs of a component. You pass them where you use the component, written like HTML attributes, and React collects them into a single object that becomes the function's first parameter:

function TaskItem(props) {
  return <li>{props.title}</li>;
}

function App() {
  return (
    <ul>
      <TaskItem title="Water the plants" />
      <TaskItem title="Pay rent" />
    </ul>
  );
}

<TaskItem title="Pay rent" /> makes React call TaskItem({ title: "Pay rent" }). Strings use quotes. Anything else, numbers, booleans, arrays, objects, functions, goes in braces:

<TaskItem title="Pay rent" done={true} priority={2} />

Destructuring props

Writing props.title everywhere gets noisy. In Advanced JavaScript you learned object destructuring, and React code uses it in the parameter list almost universally:

function TaskItem({ title, done }) {
  return <li>{done ? "✓ " : ""}{title}</li>;
}

Same function, the { title, done } pattern pulls the fields out of the props object immediately. Read any real React codebase and this is the shape you will see.