Numbers and Booleans

A prop in quotes is always text. Any other value goes in curly braces, as everywhere in JSX: a number, a boolean, a variable, an expression:

<BandCard name="Night Trains" likes={128} headliner={true} />

Why does it matter that likes is a number? As in JavaScript, text and numbers behave differently. With likes="128", the card would get the text "128", and {likes + 1} would show 1281, because + joins text. With likes={128}, it shows 129.

For a prop that's true, there's a shorter way: just its name, without a value. These two cards get the same props:

<BandCard name="Night Trains" headliner={true} />
<BandCard name="Night Trains" headliner />

A prop that the parent leaves out is undefined in the component, and undefined works as false in a condition. So only the headliner's card needs the prop, and the others just don't have it.

What can the card do with a boolean? A component is a function, so before the return, it can run any JavaScript: create variables, use if, call functions. Only what it returns appears on the page. For example, it can choose a class:

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

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

Writing {headliner} into the JSX wouldn't show anything: React shows nothing for true and false. (The Lists and Conditions lesson shows shorter ways of showing something only sometimes.)