У каждой карточки своё состояние

Где React хранит состояние? Не в функции: она запускается заново при каждой отрисовке. React хранит его для компонента, на его месте на странице. Поэтому если компонент использован три раза, у каждого из трёх своё состояние.

Вот BandCard с кнопкой лайка, в отдельном файле:

import { useState } from "react";

export default function BandCard({ name }) {
    const [likes, setLikes] = useState(0);

    return (
        <li className="card">
            <h2>{name}</h2>
            <button onClick={() => setLikes(likes + 1)}>♥ {likes}</button>
        </li>
    );
}

А App показывает три такие карточки:

<ul>
    <BandCard name="Ночные поезда" />
    <BandCard name="Лунные коты" />
    <BandCard name="Совиный хор" />
</ul>

Дважды нажмите на сердце у «Лунных котов», и только их карточка покажет ♥ 2. Две другие по-прежнему показывают ♥ 0. У каждого BandCard свой likes, хотя все они созданы одной и той же функцией — так же, как три копии бланка заполняются по отдельности. (Обработчик здесь — одна короткая строка, поэтому он записан прямо в JSX.)

Когда карточки получаются из map(), React различает их по key. Это ещё одна причина брать ключи из идентификаторов: когда список меняется, у каждой группы остаются её собственные лайки.

Состояние закрыто внутри своего компонента. App не знает, сколько лайков у карточки, а карточки не знают друг о друге. А что, если App нужны эти числа, например чтобы показать все лайки вместе? Тогда состояние придётся поднять в App. Об этом рассказывает урок «Общее состояние» позже в курсе.