Change Picker in ListView React Native
<p>I hope you can help me. I have a listview with bikes from an api. And I have a picker in each row to rent a number of bikes. The picker's selectedValue is the same in every row. So when I change the picker in one row, the number changes in every row beacuse I use setState to change it. I don't want to change the dataSource, only the state of one row. I have searched, but I can't find the right answer.</p>

<p>Here is my code:</p>

<pre><code> import React, { Component } from 'react';
 import {
  Text,
  View,
  StyleSheet,
  ListView,
  Image,
  TouchableHighlight,
  TextInput,
  Picker,
  Item,
  Alert,
  ScrollView
 } from 'react-native';

 import MapView from 'react-native-maps';
 import DatePicker from 'react-native-datepicker';

 import FourthScreen from './FourthScreen';

 export default class ThirdScreen extends Component {

 constructor(props) {
  super(props);

  this.state = {
   dataSource: new ListView.DataSource({
     rowHasChanged: (row1, row2) =&gt; row1 !== row2,
   }),
   bikes: [],
   bikeCount: 0,
   region: {
    latitude: this.props.latitude,
    longitude: this.props.longitude,
    latitudeDelta: 0.06,
    longitudeDelta: 0.06
   },
   count: '0',
   price: 0.00,
   date1: '',
   date2: '',
   amount: '0',
   numbers: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
   totalPrice: 0.00
 }
}

componentWillMount() {
 this.getBikesFromApiAsync();
}

getBikesFromApiAsync() {
 return fetch(`https://api.bimbimbikes.com/locations/${this.props.id}/bikes`,                 {
  method: 'GET',
  headers: {
    'Authorization': 'Basic ',
  }
})
.then((response) =&gt; response.json())
.then((json) =&gt; {
  this.setState({
    dataSource: this.state.dataSource.cloneWithRows(json.data.results),
    bikes: json.data.results
  });
  console.log(this.state.dataSource);
  console.log(this.state.bikes);
})
.catch((error) =&gt; {
  console.error(error);
})
.done();
}

render() {
var bikeCount = this.state.bikes.length;
return (
  &lt;ScrollView&gt;
    &lt;View style={styles.container}&gt;
      &lt;View style={styles.viewMapView}&gt;
        &lt;MapView
          style={styles.mapView}
          region={this.state.region}&gt;
          &lt;MapView.Marker
            coordinate={this.state.region}
            title={this.props.name}
          /&gt;
        &lt;/MapView&gt;
      &lt;/View&gt;
      &lt;Text style={styles.textStyle}&gt;{this.props.name}&lt;/Text&gt;
      &lt;Text style={styles.textStyle}&gt;{this.props.city_name}, {this.props.country_name}&lt;/Text&gt;
      &lt;View style={styles.date}&gt;
        &lt;DatePicker
          style={{width: 300, marginBottom: 10}}
          date={this.state.date1}
          mode="date"
          placeholder="Startdatum"
          format="DD-MM-YYYY"
          confirmBtnText="Confirm"
          cancelBtnText="Cancel"
          onDateChange={(date1) =&gt; {this.setState({date1: date1});}}/&gt;
        &lt;DatePicker
          style={{width: 300}}
          date={this.state.date2}
          mode="date"
          placeholder="Einddatum"
          format="DD-MM-YYYY"
          confirmBtnText="Confirm"
          cancelBtnText="Cancel"
          onDateChange={(date2) =&gt; {this.setState({date2: date2});}}/&gt;
      &lt;/View&gt;
      &lt;Text style={styles.textStyle}&gt;{bikeCount.toString()} Fietsen&lt;/Text&gt;
      &lt;ListView
        dataSource={this.state.dataSource}
        renderRow={this.renderBikesRow.bind(this)}
      /&gt;
    &lt;Text style={styles.textStyle}&gt;Prijs: € {this.state.price}&lt;/Text&gt;
      &lt;View style={styles.buttonView}&gt;
        &lt;TouchableHighlight style={styles.button} onPress={() =&gt; this.reserveBike()}&gt;
          &lt;Text style={styles.buttonText}&gt;Reserveer Nu&lt;/Text&gt;
        &lt;/TouchableHighlight&gt;
      &lt;/View&gt;
    &lt;/View&gt;
  &lt;/ScrollView&gt;
)
}

reserveBike() {
 if(this.state.date1 &amp;&amp; this.state.date2) {
  this.props.navigator.push({
    component: FourthScreen,
    passProps: {
      date1: this.state.date1,
      date2: this.state.date2,
      name: this.props.name,
      city_name: this.props.city_name,
      country_name: this.props.country_name,
      total: this.state.total
    }
  });
} else {
  Alert.alert(
    'Choose Date',
    'You have to choose a date'
  );
}
}

onValueChange(key: number, value: number) {
 console.log(key);
 console.log(value);
}

renderBikesRow(rowData, sectionId, rowId, highlightrow) {
 console.log(rowData, sectionId, rowId, highlightrow);
 var price = rowData.prices['24h'] / 100;
 var amount = this.state.amount;
 return (
  &lt;View style={styles.row}&gt;
    &lt;Text style={styles.textStyleBike}&gt;{rowId}: {rowData.name}&lt;/Text&gt;
    &lt;Picker
      style={styles.picker}
      selectedValue={this.state.amount}
      onValueChange={(number) =&gt; this.setState({amount: number, price: number * price})}
      mode="dropdown"&gt;
      {this.state.numbers.map((number) =&gt; {return &lt;Picker.Item value={number} label={number.toString()} key={number}/&gt; })}
    &lt;/Picker&gt;
    &lt;Text style={styles.textStylePrice}&gt;€ {price}&lt;/Text&gt;
  &lt;/View&gt;
)
}
}

var styles = StyleSheet.create({
 container: {
  flex: 1,
  marginTop: 60,
  backgroundColor: 'rgb(82, 71, 72)'
 },
 viewMapView: {
  alignItems: 'center'
 },
 mapView: {
  width: 300,
  height: 200,
  marginTop: 10,
  alignItems: 'center'
 },
  textStyle: {
  margin: 10,
  color: '#fff',
  fontSize: 20,
  textAlign: 'center'
 },
 date: {
  alignItems: 'center',
 },
 row: {
  flex: 5,
  flexDirection: 'row',
  borderBottomWidth: 1
 },
 textStyleBike: {
  color: '#ffa405',
  fontSize: 20,
  paddingTop: 15,
  paddingRight: 10,
  paddingLeft: 10,
  flex: 3
 },
 textInput: {
  height: 50,
  width: 50,
  textAlign: 'center',
  flex: 1,
  fontSize: 20
 },
 picker: {
  flex: 1,
  height: 50
 },
 textStylePrice: {
  color: '#ffa405',
  fontSize: 20,
  paddingTop: 15,
  paddingRight: 10,
  paddingLeft: 10,
  flex: 1
 },
 button: {
  height: 40,
  width: 300,
  justifyContent: 'center',
  alignItems: 'center',
  backgroundColor: '#ffa405',
  marginBottom: 10
},
buttonText: {
 fontSize: 18,
 fontWeight: '600'
},
buttonView: {
 alignItems: 'center'
}
});
</code></pre>