Question: I start with: 

```
constructor() {
   super();
      this.state = {
         lists: ['Dogs','Cats'], 
         items: {Dogs: [{name: "Snoopy"}, {name: "Lola"}, {name: "Sprinkles"}], 
                 Cats: [{name: "Felidae"}, {name: "Garfiled"}, {name: "Cat in the Hat"}] }             
   };

}

```

then I have my addItem function:

```
handleAddItem(s) {      

  var key = Object.keys(s)[0];
  var value = s[key];

  var allItems = {...this.state.items};

      allItems[key].push({name: value});    

      this.setState({items: allItems});
}

```

elsewhere I define s as:

```
var s={};
   s[this.props.idName] = this.refs.id.value;

```

This works but I'm wondering if this is the right way to add an element into one of the keys in items. AllItems is really pointing to this.state.items and I thought it should be a deep copy but I'm not sure how to do that.

It seems like items is an object that holds key/value pairs where the value is an array. Is that correct? Where can I go to learn how to manipulate a structure like that?

Answer: 
One issue might be that `var allItems = {...this.state.items};` will only do a shallow clone of `this.state.items`. So when you push data into this array, it will change the existing array before you call `setState`.

You could use [Immutable.js](https://facebook.github.io/immutable-js/docs/#/) to solve this issue.

```
import { List, fromJS, Map } from 'immutable';

constructor() {
   super();
      this.state = {
       lists: List(['Dogs','Cats']), 
       items: fromJS({
        Dogs: [
          { name: "Snoopy" },
          ...
        ],
        Cats: [
          { name: "Felidae" },
          ...
        ]
      })
   };
}

```

and then your add function would be as follow:

```
handleAddItem(s) {      
  var key = Object.keys(s)[0];
  var value = s[key];

  var allItems = this.state.items.set(key, Map({ name: value }));
  this.setState({ items: allItems });
}

```

Just a thought!
Here is a one line deep-copy. This is for 'single level' deep objects. If your object has other objects / arrarys, you'll need to use a recursive method.

```
const clone = array_of_objects.map( x => { return {...x}} )

```