title: Right way to clone objects / arrays during setState in React
body: <p>I start with: </p>
  
  <pre><code>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"}] }             
     };
  
  }
  </code></pre>
  
  <p>then I have my addItem function:</p>
  
  <pre><code>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});
  }
  </code></pre>
  
  <p>elsewhere I define s as:</p>
  
  <pre><code>var s={};
     s[this.props.idName] = this.refs.id.value;
  </code></pre>
  
  <p>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.</p>
  
  <p>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?</p>