Глава 9. Props: как передавать данные в компоненты

Зачем эта глава

Props — это способ передавать данные в компонент. Без props компоненты были бы «глухими» и не получали бы информацию снаружи.

Props — это аргументы функции-компонента.

Props приходят от родителя и не должны изменяться внутри компонента.

JSX

function Badge({ label }) {
  return <span>{label}</span>;
}

function App() {
  return <Badge label="Новичок" />;
}

Важно: если нужно изменить данные, используй state у родителя и передавай вниз.

Ты умеешь передавать данные в компоненты через props.

Цель: карточка продукта.

Требования: название, цена, наличие — всё через props.

Критерий готовности: компонент можно переиспользовать для разных товаров.