0

I will try to be as short as possible. So basically I have a react app where I am mapping over an array of objects where each object is a row in a table. At the end of each row, there is a delete button to which I'm passing a jsx 'id' attribute (retrieved from the object) so I know which row to delete. When the button is clicked I am passing this function:

const handleDelete = (e) => {
    console.log(e.target.id);
    const passedId = e.target.id;
    let newdata = data.filter((obj) => obj.id != passedId); // != works fine !== returns the same array
    console.log(newdata);
    //axios stuff
}

I want to filter the array so that it doesn't include the object with the passed id. In the console-logs e.target.id as expected is an integer, the id of the object is also an integer. Then why doesn't strictly not equal (!==) work as well?

CapBul
  • 55
  • 1
  • 9

2 Answers2

2

Using != compares the value of two variables. Using !== compares both the value and the type.

For example, "5" == 5 is true "5" === 5 is false

Without seeing your input, I would imagine that e.target.id is a different type than obj.id

See here for more

David M
  • 91
  • 1
  • 5
0

The problem is that when you do event.target.id, according to the documentation, the result is a String, which is not the same thing as an Integer. So, when you compare the 2 variables, they have different data types so they are not equal according to "===".

So, in this case, you will have to use loose comparison to check the values.

https://developer.mozilla.org/en-US/docs/Web/API/Element/id

SatvikVejendla
  • 424
  • 5
  • 14