Hey I'm trying to remove a key:value pair from state inside a Javascript Object.

It works when I hardcode the key name in the code, but when I try to use a variable from a function call, it does nothing.

Can somebody help me out?

Here's an object example:

  toppingsSelected: {
     "Onion":"true",
     "Mushrooms":"true",
  }

This works, hardcoded:

deleteTopping = toppingName => {

   const { Onion, ...withoutOnion } = toppingsSelected;
   console.log(withoutOnion); // Returns object without onion

  };

This doesn't work:

deleteTopping = toppingName => {


   const toppingName = "Onion"; // Variable gets passed in

   const { toppingName, ...withoutOnion } = toppingsSelected;
   console.log(withoutOnion); // Returns original object, no change made

  };

So I'm basically trying to remove a key from React state but I'm pretty new to Javascript.

How can I make Javascript aware that toppingName is a key?

Hey I'm trying to remove a key:value pair from state inside a Javascript Object.

It works when I hardcode the key name in the code, but when I try to use a variable from a function call, it does nothing.

Can somebody help me out?

Here's an object example:

  toppingsSelected: {
     "Onion":"true",
     "Mushrooms":"true",
  }

This works, hardcoded:

deleteTopping = toppingName => {

   const { Onion, ...withoutOnion } = toppingsSelected;
   console.log(withoutOnion); // Returns object without onion

  };

This doesn't work:

deleteTopping = toppingName => {


   const toppingName = "Onion"; // Variable gets passed in

   const { toppingName, ...withoutOnion } = toppingsSelected;
   console.log(withoutOnion); // Returns original object, no change made

  };

So I'm basically trying to remove a key from React state but I'm pretty new to Javascript.

How can I make Javascript aware that toppingName is a key?

• javascript
• reactjs
• object
• ecmascript-6

• As far as I know you can't use dynamic keys while destructing. So, go for alternative provided answer. – devserkan Commented Aug 2, 2018 at 13:19

3 Answers 3

Another option is to add square brackets arround toppingName, and assign it to a variable. As @Bergi pointed out in the ments, this option does not mutate toppingsSelected

const toppingsSelected = {
  "Onion":"true",
  "Mushrooms":"true",
};
const toppingName = "Onion";
const {
  [toppingName]: topping,
  ...withoutOnion
} = toppingsSelected;

console.log(JSON.stringify(withoutOnion));

To set the React state, you'd then do this

this.setState({ toppingsSelected: withoutOnion })

You can use delete e.g.

delete toppingsSelected[toppingName];

One way of doing this is using Array.prototype.filter()

const _obj = {
  'Onion': true,
  'notOnion': false
};

const newObj = Object.keys(_obj)
  .filter(key => key !== 'Onion')
  .reduce((acc, cur) => ({ ...acc, cur }), {})

console.log(newObj); // { notOnion: false }

This will return a new object without the 'Onion' property