setState unable to spread into nested array without overwriting - immutability, react

Question

Given I have these x3 checkbox input elements:

<input name="notifications.updatesCategoryNotifications.email_newsletter"" ... />
<input name="notifications.updatesCategoryNotifications.shopping" ... />
<input name="misc.updatesCategoryNotifications.profile" ... />

and wish to construct a data structure from its name attribute:

handleCheckboxChange(event) {
    const { target } = event;
    const type = target.name.split('.')[0]; // notifications
    const parent = target.name.split('.')[1]; // updatesCategoryNotifications
    const child = target.name.split('.')[2]; // email_newsletter

    // change-up the checked value in relevant object
    const activeArray = [...this.state[parent]];
    const activeArrayIdx = activeArray.map(item => item.name === child).indexOf(true);
    activeArray[activeArrayIdx].value = target.checked;

    // redo state and group things to send
    this.setState({
      dirtyData: {
        ...this.state.dirtyData,
        [type]: [
          activeArray[activeArrayIdx]
        ],
      },
    });
  }

Expected result: (this.state.dirtyData)

{
  "misc": [
    {
      "name": "profile",
    }
  ],
  "notifications": [
    {
      "name": "email_newsletter",
    },
    {
      "name": "shopping",
    }
  ]
}

Actual result: (this.state.dirtyData)

{
  "misc": [
    {
      "name": "profile",
    }
  ],
  "notifications": [
    {
      "name": "email_newsletter",
    },
  ]
}

Currently there is only ever one object being sent to the [type] property array again and again. I need it to add to it's own [type]. Think I'm just missing a trick with a spread operator?

Any help would be greatly appreciated!

it would help if yo can create a lightweight running example with your code. — Sagiv b.g, Sep 20 '18 at 20:56

score 0 · Answer 1 · answered Sep 20 '18 at 21:02

Taking a guess here, since you are already modifying the values in activeArray you can just spread it:

// redo state and group things to send
this.setState({
  dirtyData: {
    ...this.state.dirtyData,
    [type]: [
      ...activeArray
    ],
  },
});

or just assign it, e.g [type]: activeArray,

setState unable to spread into nested array without overwriting - immutability, react

1 Answers1