Remove an object's key and value using a variable from function

Question

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?

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

TFischer · Accepted Answer · 2018-08-02 13:43:00Z

6

Another option is to add square brackets arround toppingName, and assign it to a variable. As @Bergi pointed out in the comments, 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 })

edited Aug 2, 2018 at 13:43

answered Aug 2, 2018 at 13:20

TFischer

1,3882 gold badges25 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

devserkan Over a year ago

Wow, what interesting way of doing this. The point is defining it as undefined I think.

TFischer Over a year ago

Onion will be undefined in withoutOnion in this example

devserkan Over a year ago

Yes I know but I can swear it, first I tried it with undefined instead of a random variable and it worked :) Now it does not work. Weird and again very interesting way.

devserkan Over a year ago

It works for me.

deleteTopping = toppingName => {     const {       [toppingName]: topping,       ...withoutOnion     } = this.state.toppingsSelected;     this.setState({toppingsSelected: withoutOnion})   }

ViktorMS Over a year ago

This works @devserkan - must be me confusing the JS syntax again. Thanks.

|

Murat Karagöz · Accepted Answer · 2018-08-02 13:15:23Z

2

You can use delete e.g.

delete toppingsSelected[toppingName];

answered Aug 2, 2018 at 13:15

Murat Karagöz

37.8k16 gold badges82 silver badges114 bronze badges

3 Comments

ViktorMS Over a year ago

That works! I tried that before but it didn't work. Must have been using wrong syntax,

Bergi Over a year ago

Notice that this - unlike destructuring - will mutate toppingsSelected, which is probably a no-go for dealing with state.

devserkan Over a year ago

Yes, if this method will be used it is better to do something like this:

const newToppingsSelected = { ...toppingsSelected }; delete newToppingsSelected[toppingName]; this.setState( { toppingsSelected: newToppingsSelected } )

Fabien Greard · Accepted Answer · 2018-08-02 13:37:42Z

0

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

edited Aug 2, 2018 at 13:37

answered Aug 2, 2018 at 13:29

Fabien Greard

1,8941 gold badge18 silver badges26 bronze badges

Collectives™ on Stack Overflow

Remove an object's key and value using a variable from function

3 Answers 3

7 Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related