Using Dynamic Value to add Object to Array with the Spread Operator

Question

I have some code within a function that looks like this:

 const updatedItemsArr = [...this.state.targetItems, {relationship: value}];

What I want to do is pass in a dynamic value in place of relationship. However, whatever I try ends up causing an error or is incorrect syntax.

This will not work:

const fieldType = 'relationship';
const updatedItemsArr = [...this.state.targetItems, {fieldType: value}];

Nor will this:

  const updatedItemsArr = [...this.state.targetItems, {`${fieldType}`: value}];

How can I pass in a dynamic value here?

score 3 · Accepted Answer · answered Nov 08 '21 at 14:46

3

In ES6 what you can do is you can put the dynamic key inside brackets. So

const updatedItemsArr = [...this.state.targetItems, {[fieldType]: value}];

should work.

answered Nov 08 '21 at 14:46

mkemaltas

1

It works like a charm, better than my solution, so if you can use ES6 this is preferred. – Firewizz Nov 08 '21 at 14:49
While it indeed works, it is basically repeating what is said [here](https://stackoverflow.com/a/2274327). It is discouraged to answer questions that are already answered on Stack Overflow. See [Why are some questions marked as duplicate?](https://stackoverflow.com/help/duplicates) (Users above 15 reputation and below 3000 reputation [can flag](https://stackoverflow.com/help/privileges/flag-posts) questions as duplicate.) – Ivar Nov 08 '21 at 14:58

score 1 · Answer 2 · answered Nov 08 '21 at 14:44

1

Something like this should do the trick.

const dynObj = {};
dynObj[fieldType] = value;  
const updatedItemsArr = [...this.state.targetItems, dynObj];

answered Nov 08 '21 at 14:44

Firewizz

2 Answers2