Пропсы только для чтения

Пропсы идут в одну сторону: от родителя к компоненту. Родитель решает, что покажет карточка, а карточка просто это показывает. Компонент никогда не меняет свои пропсы, и React следит за этим. Объект с пропсами заблокирован, и попытка его изменить заканчивается ошибкой:

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>'

Зачем блокировать пропсы? Они принадлежат родителю. Он может использовать те же данные где-то ещё на странице и рассчитывает, что они останутся такими, какими он их передал. Если бы каждый компонент мог их менять, никто не мог бы понять, откуда на странице взялось значение.

Когда компоненту нужно значение, полученное из пропсов, он создаёт для него новую переменную, а пропсы остаются как были:

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

А когда что-то на карточке должно быть другим, меняйте это там, откуда приходят пропсы: в родителе, который передаёт другие значения.

А как быть со значениями, которые меняются во время работы приложения, например с числом лайков после нажатия на кнопку? Это не пропсы. Компонент хранит такие значения в своём состоянии, о нём — урок «Состояние». А пока думайте о пропсах как об аргументах функции: компонент читает их и никогда не меняет.