Числа и логические значения

Проп в кавычках — всегда текст. Любое другое значение пишется в фигурных скобках, как и везде в JSX: число, логическое значение, переменная, выражение:

<BandCard name="Ночные поезда" likes={128} headliner={true} />

Почему важно, что likes — число? Как и в JavaScript, текст и числа ведут себя по-разному. При likes="128" карточка получила бы текст "128", и {likes + 1} показало бы 1281, потому что + склеивает текст. При likes={128} будет показано 129.

Для пропа со значением true есть короткая запись: только его имя, без значения. Эти две карточки получают одинаковые пропсы:

<BandCard name="Ночные поезда" headliner={true} />
<BandCard name="Ночные поезда" headliner />

Проп, который родитель не указал, в компоненте равен undefined, а undefined в условии работает как false. Поэтому проп нужен только карточке хедлайнера, а у остальных его просто нет.

Что карточка может сделать с логическим значением? Компонент — это функция, поэтому перед return он может выполнять любой JavaScript: создавать переменные, использовать if, вызывать функции. На странице появляется только то, что он возвращает. Например, он может выбрать класс:

export default function BandCard({ name, headliner }) {
    let className = "card";
    if (headliner) {
        className = "card headliner";
    }

    return (
        <article className={className}>
            <h3>{name}</h3>
        </article>
    );
}

Если написать {headliner} в JSX, ничего не покажется: React ничего не показывает для true и false. (Более короткие способы показывать что-то только иногда есть в уроке «Списки и условия».)