Есть карточки. У каждой карточки есть свой стейт
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)} />)}</>
)
}
