skip to Main Content

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


  1. 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

    export default function App() {
      const [friendsState, setFriendsState] = useState(friends);
    
      function deleteCard(index) {
        alert("Deleting");
        let newFriends = friendsState.filter((x) => {
          return x.index !== index;
        });
    
        setFriendsState(newFriends);
      }
      
      return (
        <>
          {friendsState.map((x, index) => (
            <Card
              name={x.name}
              home={x.home}
              id={index}
              deleteCard={() => deleteCard(index)}
              key={index}
            />
          ))}
        </>
      );
    }
    

    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.

    Login or Signup to reply.
  2. I doubt that your items have an index property

    let newFriends = friendsState.filter((x, i) => {
      return i != index;
    });
    
    Login or Signup to reply.
  3. Looking 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:

    export default function App() {
      const [friendsState, setFriendsState] = useState(friends);
    
      function deleteCard(cardToDelete) {
        alert("Deleting");
        let newFriends = friendsState.filter((x) => {
          return x !== cardToDelete;
        });
    
        setFriendsState(newFriends);
      }
      
      return (
        <>
          {friendsState.map((x, index) => (
            <Card
              name={x.name}
              home={x.home}
              id={index}
              deleteCard={() => deleteCard(x)}
              key={index}
            />
          ))}
        </>
      );
    }
    

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search