Update specific object in array in state

Question

I'm trying to update an object in an array which is in my state.

I have an array of objects 'this.state.webs' which is presented in multiple div`s on a page. Each one has an onclick method which send the object to a function, then I do an API call and returns a set of 'sub webs' which I want to add to the object in the property 'subs'.

My state:

this.state = {
  webs: this.props.webs
}

My template:

<Nav
   groups={[
     {
       links: this.state.webs
     }
   ]}
   expandedStateText={'expanded'}
   collapsedStateText={'collapsed'}
   selectedKey={'key3'}
   onLinkClick={this._openWeb.bind(this)}
 />

Onclick function:

  private async _openWeb(r, n): Promise<void> {
    const service = new MyService();
    var subs = await service.getSubs(n);

    n.subs = subs;

    ### How do I update 'n' with the subs? setState({ ? })
  }

So, when a user clicks a web, I am fetching some sub webs and then I want to update the parent object n with the children (subs).

Tholle · Accepted Answer · 2018-07-04 18:06:22Z

1

You can update your webs array with everything before n, a clone of n with the updated subs, and everything after n:

private async _openWeb(r, n): Promise<void> {
  const service = new MyService();
  const subs = await service.getSubs(n);

  const { webs } = this.state;
  const nIndex = webs.indexOf(n);

  this.setState({
    webs: [
      ...webs.slice(0, nIndex),
      { ...n, subs },
      ...webs.slice(nIndex + 1)
    ]
  })
}

answered Jul 4, 2018 at 18:06

Tholle

113k22 gold badges209 silver badges198 bronze badges

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

6 Comments

ffffff01 Over a year ago

This works as expected :) I'm still a bit baffeled by the complexity of something so fundamental.

ffffff01 Over a year ago

What if I need to update an object which is further down in the structure? Lets say one of the objects in the array subs had another array with subs? I'm struggeling to see how this is solved. It's completely dynamic, so it could be 5 levels of nested subs.

Tholle Over a year ago

@ffffff01 Nested arrays gets pretty hairy with immutable data. If you e.g. would want to change a nested links array, you could find the index of your web and also the index of your link and do the same process twice.

ffffff01 Over a year ago

My issue is that I dont know the web when the sub is clicked. I guess I need to add some additional data like a parent property or something.. I miss my angularjs projects right now :)

Tholle Over a year ago

@ffffff01 I can't say for certain, but if you know what sub is clicked, you most likely know what web is clicked as well, since I guess you are looping over all webs and their subs. E.g. _openSub(web, sub)

|

ffffff01 · Accepted Answer · 2018-07-05 08:13:14Z

1

Based on the answer from Tholle and Filip W, I came up with my own approach.

Gladly to recieve some comments if this approach isn't recommended, but I find it easier to understand than the suggestion from Tholle.

const webs = [...this.state.webs];
const index = webs.indexOf(n);
webs[index].links = links;
webs[index].isExpanded = true;
this.setState({webs})

answered Jul 5, 2018 at 8:13

ffffff01

5,26811 gold badges56 silver badges61 bronze badges

1 Comment

Tholle Over a year ago

This is a nice solution. Just make sure that you don't mutate your webs[index] object. webs[index] = { ...n, links, isExpanded: true };

Filip W · Accepted Answer · 2018-07-04 18:16:23Z

-1

From my experiences with presenting array of data it was useful to also send an index of the targeted object (or div where click happened). So something like this could be useful:

   const webs = this.state.webs
   webs[index].subs = subs
   this.setState({webs})

answered Jul 4, 2018 at 18:16

Filip W

192 bronze badges

2 Comments

Safi Nettah Over a year ago

You mutate webs

Filip W Over a year ago

webs is reference to the object this.state.webs

Collectives™ on Stack Overflow

Update specific object in array in state

3 Answers 3

6 Comments

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related