Remove and Add items from array in nested javascript object I have the following object at React state:

groups: [
    {
        id: 1,
        items: [
            {id: 1},
            {id: 2},
            {id: 3}
        ]
    },
    {
        id: 3,
        items: [
            {id: 1},
            {id: 3},
            {id: 4}
        ]
    }
]


I have written the following functions to add and remove items:

  removeItem(groupId, itemId) {
    // make a copy
    let {groups} = this.state

    const gIndex= groups.findIndex(g=&gt; g.id == groupId);
    let items = groups[gIndex].items
    groups[gIndex].items = items.filter((i) =&gt; i.id !== itemId)

    this.setState({groups})
  }

  addItem(groupId, itemId) {
    // make a copy
    let {groups} = this.state 

    const gIndex = groups.findIndex(g =&gt; g.id == groupId);
    let items = groups[gIndex].items
    groups[gIndex].items = items.concat({id: itemId})

    this.setState({groups})
  }


Is there any way to write it cleaner?
For the remove function, how about using a map and filter instead:

removeItem (groupId, itemId){
    let {groups} = this.state;
    groups = groups.map((group) =&gt; {
        if(group.id === groupId){ 
           group.item = group.item.filter(item =&gt; item.id !== itemId);
        }
        return group;
    });
    this.setState({groups});
}