Props

Props (short for properties) are the data a parent component passes to a child. They are written like tag attributes. Thanks to props, one TodoItem component can show different tasks.

Passing and receiving

Everything written in a component's tag arrives in the function as one object. Change src/components/TodoItem.jsx:

// src/components/TodoItem.jsx
export default function TodoItem(props) {
  return <li>{props.text}</li>;
}

Now pass the text from App:

// src/App.jsx
import TodoItem from './components/TodoItem.jsx';
 
export default function App() {
  return (
    <ul>
      <TodoItem text="Buy milk" />
      <TodoItem text="Call Oleg" />
    </ul>
  );
}

The page shows two different items: "Buy milk" and "Call Oleg".

Destructuring

Usually the props object is unpacked right away — it is shorter and shows at a glance what the component expects:

// src/components/TodoItem.jsx
export default function TodoItem({ text }) {
  return <li>{text}</li>;
}

Different value types

Strings go in quotes, everything else in curly braces:

// src/components/TodoItem.jsx
export default function TodoItem({ text, done, priority }) {
  return (
    <li>
      {text} — priority {priority}, {done ? 'done' : 'not done'}
    </li>
  );
}

// src/App.jsx
<TodoItem text="Buy milk" done={true} priority={2} />

The item shows "Buy milk — priority 2, done". For true there is a shorthand: just done with no value.

Default values

A prop that is not passed is undefined. A default value is set during destructuring:

// src/components/TodoItem.jsx
export default function TodoItem({ text, priority = 1 }) {
  return (
    <li>
      {text} (priority {priority})
    </li>
  );
}

<TodoItem text="Buy bread" /> shows "Buy bread (priority 1)".

Passing a whole object

When there is a lot of data, it is handy to pass the task object as one prop:

// src/App.jsx
const todo = { id: 1, text: 'Buy milk', done: false };
 
<TodoItem todo={todo} />;

// src/components/TodoItem.jsx
export default function TodoItem({ todo }) {
  return <li>{todo.text}</li>;
}

This form is used throughout the rest of the course.

Data flows down

Props go only from parent to child. A child cannot change its parent's props or pass them up. For a child to report an event, the parent passes it a function — this is shown in the lesson on lifting state up.

Common mistake

Props must not be changed — they are read-only. A component gets data from its parent and must not overwrite it:

export default function TodoItem({ text }) {
  // Wrong: text = text.toUpperCase();
 
  const title = text.toUpperCase();
  return <li>{title}</li>;
}

If you need a different value, create a new variable. If a value must change over time, you need state — that is the next chapter.