title: Replacing Object Stored in State does not Update View
body: <p>You can find the pertinent code and screenshot below. As well, there's a <a href="https://rnplay.org/apps/a6WL2g" rel="nofollow noreferrer">working demo at rnplay.org</a></p>
  
  <p>Here's the problem in a nutshell. I have a ListView. The dates of each row are dynamic, based on a mapping to an object stored in state. When I click the <em>Cycle Dates</em> button, I replace the object <code>this.state.cacheTimestamps</code> which should update each row's date. At least that's what I expect to happen. Can anyone help me understand why that is not actually happening?</p>
  
  <pre><code>class SampleApp extends React.Component{
  
    constructor(props){
      super(props);
      this.ds = new ListView.DataSource({ rowHasChanged: (r1, r2) =&gt; r1 !== r2 });
  
      this.state = {
        dataSource: this.ds.cloneWithRows(['ABCD','EFGH','IJKL']),
        cacheTimestamps: {},
        cacheLotery: [
          {'ABCD': 'Jan 1, 1970'},
          {'ABCD': 'Jan 2, 1970', 'EFGH': 'Jan 2, 1971'},
          {'ABCD': 'Jan 3, 1970', 'EFGH': 'Jan 3, 1971', 'IJKL': 'Jan 3, 1972'},
        ],
      }
  
      // this.randomIntBetween.bind(this);
    }
  
    componentWillMount(){
       this.setState({
         cacheTimestamps: this.state.cacheLotery[this.randomIntBetween(0,2)]
       })
    }
  
    row( id ){
      let lastCached = (this.state.cacheTimestamps[id]) ? this.state.cacheTimestamps[id] : 'never';
  
       return(
          &lt;View&gt;
            &lt;Text style={styles.label}&gt;
              {id}
            &lt;/Text&gt;
            &lt;Text style={styles.cache}&gt;
              {lastCached}
            &lt;/Text&gt;
          &lt;/View&gt;
       )
    }
  
    cycleDates(){
      const min = 0;
      const max = 2;
      const idx = this.randomIntBetween(min,max);
  
      this.setState({
        cacheTimestamps: this.state.cacheLotery[ idx ]
      }, ()=&gt; console.log('dbug cycleDates, new index [%i] and cacheTimestamps Object is %O', idx, this.state.cacheTimestamps));
    }
  
    randomIntBetween(min, max) {
      return Math.floor(Math.random() * (max - min)) + min;
    }
  
    render() {
      return (
        &lt;View style={styles.container}&gt;
          &lt;ListView
            dataSource={this.state.dataSource}
            renderRow={this.row.bind(this)} 
          /&gt;
          &lt;TouchableHighlight
            onPress={ ()=&gt;this.cycleDates() } &gt;
            &lt;Text style={styles.buttonTxt}&gt;
              Cycle Dates
            &lt;/Text&gt;
          &lt;/TouchableHighlight&gt;
        &lt;/View&gt;
      );
    }
  };
  </code></pre>
  
  <p>Incidentally, thinking that maybe it didn't see the new object as a different object, I tried <code>Object.assign</code> as well to ensure it's a completely new object..</p>
  
  <pre><code>  cycleDates(){
      const min = 0;
      const max = 2;
      const idx = this.randomIntBetween(min,max);
  
      this.setState({
        cacheTimestamps: Object.assign({}, this.state.cacheLotery[ idx ])
      }, ()=&gt; console.log('dbug cycleDates, new index [%i] and cacheTimestamps Object is %O', idx, this.state.cacheTimestamps));
    }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/IpjnW.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/IpjnW.png" alt="enter image description here"></a></p>