Деструктуризация пропсов

Писать props. перед каждым пропом становится утомительно, когда их в компоненте много. Поэтому в React-коде пропсы обычно достают из объекта прямо в параметрах — с помощью деструктуризации, знакомой вам по курсу JavaScript:

const { name, stage } = band;

В параметрах всё так же, только без const и =. Фигурные скобки достают пропсы из объекта, который передаёт React:

export default function BandCard({ name, stage }) {
    return (
        <article className="card">
            <h3>{name}</h3>
            <p>{stage}</p>
        </article>
    );
}

Компонент работает как раньше, но короче, а его первая строка сразу говорит, какие пропсы он принимает. Так написаны компоненты в большинстве React-кода и в остальной части этого курса.

Типичные ошибки:

• Забытые фигурные скобки: function BandCard(name, stage). React передаёт один объект, поэтому name — это весь объект со всеми пропсами. React не умеет показывать объект, поэтому страница пустая, а консоль пишет Objects are not valid as a React child (found: object with keys {name, stage}).
• Запись props.name после деструктуризации. Никакого props больше нет, есть только name, и консоль пишет ReferenceError: props is not defined.