Props Are Read-Only

Props go one way: from the parent to the component. The parent decides what a card shows, and the card just shows it. A component never changes its props, and React makes sure of that. The props object is locked, and an attempt to change it ends with an error:

export default function BandCard(props) {
    props.name = props.name.toUpperCase();
    return <h3>{props.name}</h3>;
}

TypeError: Cannot assign to read only property 'name' of object '#<Object>'

Why are props locked? They belong to the parent. It may use the same data somewhere else on the page, and it expects them to stay as it passed them. If every component could change them, nobody could tell where a value on the page came from.

When a component needs a value made from its props, it creates a new variable for it, and the props stay as they were:

export default function BandCard({ name }) {
    const loudName = name.toUpperCase();
    return <h3>{loudName}</h3>;
}

And when something on the card should be different, change it where the props come from: in the parent, which passes other values.

What about values that change while the app runs, such as the number of likes after a click on a button? Those aren't props. A component keeps them in its state, which is what the State lesson is about. Until then, think of props as the arguments of a function: the component reads them and never changes them.