title: Connect two modal picker in react native
body: <p>I use react native modal picker to drop down the data <a href="https://www.npmjs.com/package/react-native-modal-pickerhttp://" rel="nofollow">link here</a></p>
  
  <p>I used two modal picker, that depend on each other. first one is select service. second one is select city. I want to display cities that have particular services. code is here</p>
  
  <pre><code>import React, { Component } from 'react';
  import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
   Alert,
   TouchableHighlight,
   Image,
   TextInput,
  } from 'react-native';
  
  var fullservice=[];
  var citylist=[];
  
  import ModalPicker from 'react-native-modal-picker'
  
  class jsonSugei extends Component {
  
  
    constructor() {
         super();
  
         this.state = {
  
             textInputValue: '',
  
             dropdownservices:[],
  
              city:'',
              dropdowncities:[],
               service:'',
  
  
  
  
         }
     }
  
     componentDidMount() {
  
     this.fetchData1();
     this.fetchData2();
  
  
  
   }
  
   fetchData1(){
  
  
  
     fetch("URL",
     {method: "POST",
     headers: {
               'Accept': 'application/json',
                'Content-Type': 'application/json',
             },
       body: JSON.stringify( {"cacheRequest":["ALL_COMPANY","ALL_SERVICE","HOT_COMPANY","BANNER","PARTNER","CITY","CALANDAR","COMMENTS "]}),
       })
    .then((response) =&gt; response.json())
    .then((responseData) =&gt; {
  
         this.setState({
           dropdownservices: responseData.services,
         });
       })
       .catch((error) =&gt; { console.warn(error); })
   .done();
  
  
  
  
   }
  
   fetchData2(){
  
     this.state = {
        service:'',
  
     }
  
  
     fetch("URL",
     {method: "POST",
     headers: {
               'Accept': 'application/json',
                'Content-Type': 'application/json',
             },
       body: JSON.stringify( {
     "companyId":"",
     "service":this.state.service,
     "key":""
  
  }),
       })
    .then((response) =&gt; response.json())
    .then((responseData) =&gt; {
  
         this.setState({
           dropdowncities: responseData.cities,
         });
       })
       .catch((error) =&gt; { console.warn(error); })
   .done();
  
  
   }
  
  
  
  
  
  
  
  
  
     render() {
  
  
       citylist= this.state.dropdowncities.map(function(item) {
  
      return {
        key:item.id,
        label: item.name,
  
      };
      });
  
  
      fullservice =this.state.dropdownservices.map(function(item) {
  
      return {
        key:item.id,
        label: item.name,
      };
      });
  
  
  
  
  
         return (
             &lt;View style={{flex:1, justifyContent:'space-around', padding:50, backgroundColor: '#ffffff'}}&gt;
  
                 &lt;ModalPicker1
                     data={fullservice}
                     initValue="Select Services!"
                      onChange={(option)=&gt;{this.setState({service:option.label})}}
                      /&gt;
  
  
  
                      &lt;ModalPicker
                        style={{marginTop:10}}
                        data={citylist}
                        initValue="City"
                         onChange={(option)=&gt;{ this.setState({city:option.label})}}
                         /&gt;
  
  
             &lt;/View&gt;
         );
     }
  }
  
  
  const styles = StyleSheet.create({
    container: {
       flex: 1,
       alignItems: 'center',
       justifyContent: 'center',
       backgroundColor: '#ffffff',
     },
     button: {
       borderRadius: 4,
       padding: 10,
       marginLeft: 10,
       marginRight: 10,
       backgroundColor: "#B8C",
     },
  });
  
  AppRegistry.registerComponent('jsonSugei', () =&gt; jsonSugei);
  </code></pre>
  
  <p>but not change cities according to the services??? I need help............</p>