rest operator to omit properties

Question

I'm attempting to use the rest operator and restructuring to omit an entry in the object. Based on the documentation, rest should no longer include the key entry 575. After the operation, rest still has the same keys as state. I'm not sure what I'm doing wrong. Thanks in advance.

book = {
  id: 575,
  title: "Vector Calc"
};
state = {
  removedBooks: {
    46: {
      id: 46,
      title: "economics"
    },
    575: {
      id: 575,
      title: "Vector Calc"
    }
  }
};
const {
  [book.id]: data, ...rest
} = state;
console.log(rest);

EDIT: I am using React and it is not recommended to mutate the state object directly. Why can't I directly modify a component's state, really? among others

i'd do this procedurally. this makes your code really hard to follow. — Daniel A. White, Sep 21 '20 at 22:10
In those code block you don't modify rest at all, you only read from it — Leon, Sep 21 '20 at 22:13
@Berto99 Yes that would work but it's not a recommended approach for modifying state in React. Sorry didn't include the context. — Biniyam Asnake, Sep 21 '20 at 22:16
@Leon That's how the rest operator works. You don't need to modify it for it to read a subset of the data. See here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters — Biniyam Asnake, Sep 21 '20 at 22:28

score 3 · Accepted Answer · answered Sep 21 '20 at 22:18

3

The books are part of the removedBooks property, and are not direct children of the state. You need to destructure the removedBooks property as well.

const book = {"id":575,"title":"Vector Calc"};

const state = {"removedBooks":{"46":{"id":46,"title":"economics"},"575":{"id":575,"title":"Vector Calc"}}};

const { removedBooks: { [book.id]: data, ...removedBooks } } = state;

const newState = { ...state, removedBooks };

console.log(newState);

answered Sep 21 '20 at 22:18

Ori Drori

183,571
29
224
209

Thank you @Ori. This definitively works in my chrome console. However, in my react component, I'm getting the wrong output. Im going to create another question focusing on that. It would be great if you can look at it. – Biniyam Asnake Sep 22 '20 at 01:39
https://stackoverflow.com/questions/64002070/rest-operator-for-deleting-property-in-object-not-working-in-react-component – Biniyam Asnake Sep 22 '20 at 01:59

score 2 · Answer 2 · answered Sep 21 '20 at 22:18

Your destructuring assignment expects a pattern of { 575: data, ...other... } but state actually has { removedBooks: { 575: data, ...other... } }. Add the removedBooks into your destructuring assignment and it works fine.

book = {
  id: 575,
  title: "Vector Calc"
};
state = {
  removedBooks: {
    46: {
      id: 46,
      title: "economics"
    },
    575: {
      id: 575,
      title: "Vector Calc"
    }
  }
};
const { removedBooks: {
  [book.id]: data, ...rest
} } = state;
console.log(rest);

rest operator to omit properties

2 Answers2