React Native ListView not re-rendering on state change by click
<p>Here is my sample code, I would like the <code>ListView</code> elements to be updated on click. </p>

<p><strong>This line defines the style:</strong></p>

<pre><code>(this.state.selectedField.id==field.id)?'green':'white'
</code></pre>

<p>In this example the active <code>View</code> should be highlighted with green color. The state is getting updated inside <code>handleClick()</code>, but <code>renderField()</code> method is not being called.</p>

<p>How to make ListView re-render on state change triggered by click?</p>

<p><a href="https://rnplay.org/apps/db540w" rel="nofollow">RNPlayNative Link</a></p>

<pre><code>import React, {Component} from 'react';
import {
  AppRegistry,
  View,
  ListView,
  Text,
  TouchableOpacity
} from 'react-native';

class SampleApp extends Component {

  constructor(props) {
    super(props);
    var ds = new ListView.DataSource({
        rowHasChanged: (row1, row2) =&gt; row1 !== row2,
    });
    this.state = {
      fields: ds.cloneWithRows([
        {id:0},{id:1},{id:2}
      ]),
      selectedField: {id:0}
    };
  }

  handleClick(field) {
    console.log("Selected field:",field);
    this.setState({
      selectedField: field
    });
  }

  renderField(field) {
    return (
      &lt;TouchableOpacity onPress={this.handleClick.bind(this, field)} &gt;
        &lt;View style={{backgroundColor:(this.state.selectedField.id==field.id)?'green':'white'}}&gt;
          &lt;Text style={{left:0, right:0, paddingVertical:50,borderWidth:1}}&gt;{field.id}&lt;/Text&gt;
        &lt;/View&gt;
      &lt;/TouchableOpacity&gt;
    );
  }

  render() {
    return (
      &lt;View&gt;
        &lt;ListView
          dataSource={this.state.fields}
          renderRow={this.renderField.bind(this)}
        /&gt;
      &lt;/View&gt;
    );
  }
}

AppRegistry.registerComponent('SampleApp', () =&gt; SampleApp);
</code></pre>