Как удалить элемент из массива, чтоб последующий элемент не получил данные первого?

Question

[Елена]

Есть карточки. У каждой карточки есть свой стейт const [btn, setBtn] = useState(false); когда удаляю первую, то данные стейта переходят на вторую. Я полагаю, это из-за того, что когда в массиве карточек, удаляется первая, то у других меняется индекс. Как я раньше не сталкивалась с этим, не понятно. Может где ошибка?

Такой код:

const Card = ({ props, onDelete }) => {
  const [btn, setBtn] = useState(false);
  const handleButtonClick = () => {
    if (btn) {
      onDelete(props.keyId);
    } else {
      setBtn(true);
    }
  };
  return (
    <div key={props.keyId}>
      <button onClick={handleButtonClick}>{btn ? 'Удалить' : 'Сохранить'}</button>
    </div>
  )
}
export const Cards = () => {
  const [cards, setCards] = useState([]);
  const handleDeleteCard = (id) => {
    setCards(cards.filter(card => card.keyId !== id));
  }
  return (
    <>{cards.map(card => <Card props={card} onDelete={(id) => handleDeleteCard(id)} />)}</>
  )
}

Comments

[Kentavr16]

А где key уникальный при мапе элементов?

[Елена]

Kentavr16, key={props.keyId}

[Kentavr16]

Елена, нет, ключ должен быть у элементов которые ты мапишь. В твоём случае это у каждого элемента кард из кардс.мап

[Alexandroppolus]

Елена, в твоем коде надо поменять
<Card
на
<Card key={card.keyId}

а для div внутри Card не нужен key

[Елена]

Alexandroppolus, спасибо, большое. Теперь увидела)

[Елена]

Alexandroppolus, я один раз в alt записала имя класса, а потом 30мин искала из-за чего класс не работает))

[Alexandroppolus]

Елена, такие душераздирающие истории есть у каждого из нас ) всего 30 мин - считай, повезло