title: React.js and update JSON Array State
body: <pre><code>var DENEMEJSON = React.createClass({
  getInitialState: function() { return {
      arrayone:[{"id":"1","city":"New York"},{"id":"2","city":"Brooklyn"}],
      arraytwo:[{"id":"101","city":"Hamburg"},{"id":"102","city":"Schalke"}]
  
  }
  
  
  },
  buttonFunc(){
      var str=this.state.arrayone;
      str[0].city="Tokyo";
  
      this.setState({arrayone:str});
      this.setState({arraytwo:str});
  },
  buttonFunc2(){
  var str=this.state.arrayone;
      str[0].city="Pakistan";
      console.log(JSON.stringify(this.state.arrayone));
      console.log(JSON.stringify(this.state.arraytwo));
      this.setState({arrayone:str});
  },
  
   render: function () {
        return (      &lt;div&gt;
          &lt;button onClick={this.buttonFunc}/&gt;
          &lt;button onClick={this.buttonFunc2}/&gt;
          {JSON.stringify(this.state.arrayone)}
          {JSON.stringify(this.state.arraytwo)}&lt;/div&gt;
               )
    }//end return
  
  });
  </code></pre>
  
  <p>When I click the first button the code does what I want. It sets the <code>arrayone[0].city</code> and <code>arraytwo[0].city</code> value to the Tokyo like that.</p>
  
  <p><code>arrayone</code> : <code>[{"id":"1","city":"Tokyo"},{"id":"2","city":"Brooklyn"}]</code></p>
  
  <p><code>arraytwo</code> : <code>[{"id":"1","city":"Tokyo"},{"id":"2","city":"Brooklyn"}]</code></p>
  
  <p>And when I click the second button I only want to set <code>arrayone[0].city</code> value to <code>Pakistan</code>.(not <code>arraytwo</code>).</p>
  
  <p>But the code set both <code>arrayone[0].city</code> and <code>arraytwo[0]</code> value to <code>Pakistan</code>.</p>
  
  <p>Why it sets the <code>arraytwo[0].value</code> to <code>Pakistan</code>?</p>
  
  <p>What can I do to solve this problem?</p>