Nested object destructuring with computed object property names - react state

Question

I'm trying to setState but I can't figure out how I can destructure the rest of object which has a dynamic property name. In this example id is a dynamic value for each input in my forms. After computing the state it looks like this:

{
    "inputConfig": {
        "5d4d684cadf8750f7077c739": {
            "0": "5d4d684cadf8750f7077c739",
            "isEmpty": true
        },
        "5d4d684cadf8750f7077c73c": {
            "time": "2019-08-10T12:33:42.439Z",
            "units": "f",
            "defaultValue": 6,
            "name": "Temp",
            "isEmpty": true
        }
    }
}

the dynamic id hols an object with input configuration:

 "5d4d684cadf8750f7077c73c": {
        "time": "2019-08-10T12:33:42.439Z",
        "units": "f",
        "defaultValue": 6,
        "name": "Temp",
        "isEmpty": true
    }

This is the code I have tried so far:

  this.setState(prevState => ({
        ...prevState,
        inputConfig: {
            ...inputConfig,
            [id]: {
                ...[id], // gives me {0: "5d4d684cadf8750f7077c739"} instead of the object it holds
            }
        }}),() =>{
          console.log(this.state.inputConfig)
        })

I would like to desctructure the object that this id holds. Is there a way to do it? I appreciate any advice on this.

that's what i thought but how can I spread the object that id holds? Since it's dynamic propertyI can't just write ...id — Maciej Czarnota, Aug 11 '19 at 04:55
Can you please post more relevant data, i.e how your state looks like, also the object being hold by `id` — Code Maniac, Aug 11 '19 at 04:55
You're already spreading `inputConfig` which holds all the data, why you need id separately than ? it's quite unclear atleast to me what you want to achieve, post the desired output too — Code Maniac, Aug 11 '19 at 05:16
Because I want to modify only the configuration of the input with particular ID. For instance want to change isEmpty to true — Maciej Czarnota, Aug 11 '19 at 05:29

score 3 · Accepted Answer · answered Aug 11 '19 at 05:34

You need to reference object at particular id

let obj = {
    "inputConfig": {
        "5d4d684cadf8750f7077c739": {
            "0": "5d4d684cadf8750f7077c739",
            "isEmpty": true
        },
        "5d4d684cadf8750f7077c73c": {
            "time": "2019-08-10T12:33:42.439Z",
            "units": "f",
            "defaultValue": 6,
            "name": "Temp",
            "isEmpty": false
        }
    }
}

let id = "5d4d684cadf8750f7077c73c"

let changed = {
  inputConfig:{
    ...obj.inputConfig,
    [id]:{
      ...obj.inputConfig[id],
      isEmpty: true
    }
  }
}

console.log(changed)

That works!! You are the man. I would never guess that I could spread the rest of the object like this. Thank you for your help! — Maciej Czarnota, Aug 11 '19 at 05:40

score 0 · Answer 2 · answered Aug 11 '19 at 05:06

You can't destruct into dynamically named variables in JavaScript without using eval.

But you can get a subset of the object dynamically if you know the property name that can appear in an object, using reduce function as follows:

const destructured = (obj, ...keys) => 
  keys.reduce((a, c) => ({ ...a, [c]: obj[c] }), {});

const object = {
  id: 987637,
  color: 'blue',
  amount: 10,
};

const set1 = destructured(object, 'id');
const set2 = destructured(object, 'id', 'color', 'amount');
console.log(set1);
console.log(set2);

Nested object destructuring with computed object property names - react state

2 Answers2