🧠 Understanding `!==` and Toggling Logic in React (Simplified Explanation for Beginners)

While working on my React packing list app, I came across two lines of code that really confused me at first:

items.filter((item) => **item.id !== id**);

and

item.id === id ? { ...item, **packed: !item.packed** } : item;

If you’re also struggling to fully understand what’s going on here, this short blog is for you. I’ll explain both lines in the simplest possible way — exactly how I finally understood them myself.

---

🎯 1. Understanding the !== Operator inside filter()

In my app, I had a function to delete an item when a user clicks the ❌ button.

function handleDeleteItem(id) {
  setItems((items) => items.filter((item) => item.id !== id));
}

At first, I thought:

“If the ID matches, shouldn’t we delete that item? Why are we using !== (not equal)?”

Here’s what’s really happening:

• filter() creates a new array.
• It keeps only those items for which the condition is true.
• So when we write item.id !== id, we’re saying:

“Keep all items whose ID is NOT equal to the one we clicked.”

This means the clicked item (the one whose ID matches) will be removed, and everything else stays in the list.

Example:

items = [1, 2, 3];
clicked id = 2;
newItems = [1, 3]; // because 2 !== 2 is false (so item 2 is removed)

✅ In simple terms:

The !== operator helps us remove the clicked item by keeping only the others.

---

🔄 2. Understanding { ...item, packed: !item.packed } inside map()

Next, I had another function to toggle whether an item was packed or not when checking a checkbox.

function handleTogglePacked(id) {
  setItems((items) =>
    items.map((item) =>
      item.id === id ? { ...item, packed: !item.packed } : item
    )
  );
}

Let’s break this one down:

• map() loops through every item and returns a new array.

• For each item:

  • If the item’s ID matches the one we clicked (item.id === id), it creates a new version of that item with packed flipped.
  • If not, it just keeps the item as it is.

The expression { ...item, packed: !item.packed } means:

“Copy everything from the old item (...item),
but set packed to the opposite of what it currently is.”

So:

• if packed was false, it becomes true.
• if packed was true, it becomes false.

This is how the app visually shows a strikethrough or removes the line when an item is checked or unchecked.

---

✨ 3. Putting It All Together

Here’s how both concepts work together in the app:

• Delete button (❌) → runs filter() → removes the clicked item.
• Checkbox click (✅) → runs map() → flips packed from true to false or vice versa.

Both operations don’t mutate the original array — they create a new version of the array and update the state with it, which is the React way of doing things.

---

🧩 Final Thoughts

When I first saw these two lines:

item.id !== id

and

item.id === id ? { ...item, packed: !item.packed } : item

they honestly looked confusing.

But once I broke them down step by step, I realized:

• !== is about keeping everything except the one you clicked.
• !item.packed is about flipping a true/false value.

Now, these two lines make perfect sense — and I hope this post helps anyone else who’s trying to understand them too.

---

💬 Your Turn

Have you ever struggled with a simple-looking line of code like this?
Drop a comment on Dev.to — I’d love to hear how you make sense of tricky JavaScript expressions.