Can someone please explain me why this filter doesn’t work? Clicking the delete button on a "friend card" is supposed to reprint list minus the deleted card. However, while the alert shows up, the list of cards doesn’t change. What’s the deal?
edit: adjusted code as per comment, but it still doesn’t change anything
edit2: wait, no, right the first time. Realized that x.index wouldn’t make sense because I have no index property
export default function App() {
const [friendsState, setFriendsState] = useState(friends);
function deleteCard(index) {
alert("Deleting");
let newFriends = friendsState.filter((x) => {
return x.id != index;
});
setFriendsState(newFriends);
}
return (
<>
{friendsState.map((x, index) => (
<Card
name={x.name}
home={x.home}
id={index}
deleteCard={() => deleteCard(index)}
key={index}
/>
))}
</>
);
}
3
Answers
The issue in your code is with the comparison in the filter function of deleteCard(). You are using the != operator to compare the index of the friend card with the index parameter passed to the deleteCard() function. However, the index values are of type number, and the != operator performs a loose comparison, which can lead to unexpected results.
To fix this, you should use the strict equality operator !== instead of != for the comparison in the filter function. Here’s the corrected code
By using the strict equality operator !==, the comparison will be performed based on both value and type, ensuring that only cards with matching indexes are filtered out.
I doubt that your items have an
index
propertyLooking at your code, I don’t really see a reason you can’t just compare the object directly instead of checking properties. Try this instead and see if that works:
It’s pretty clear that your issue is that the
id
property on the objects do not correspond to the objects’ index in the array.