How to fill the collector (android) to respond natively using fetch

Question

I have a collector in my application and I want to fill it with data received on the server, I have data in the state of the application, but I do not know how to get the application to update the collector when the data is retrieved

constructor(props) {
    super(props);
    this.state = {
      isLoading: false,
      client: '',
      clients: null
    };
  }

componentDidMount() {
    this.fetchData();
  }

I have it in my opinion

<Picker
              style={styles.picker}
              itemStyle={styles.items}
              selectedValue={this.state.client}
              onValueChange={(cli) => this.setState({client: cli})}
              prompt="Seleccione un cliente" >
              <Picker.Item label="Cliente 1" value="1" />
              <Picker.Item label="Cliente 2" value="2" />
              <Picker.Item label="Cliente 5" value="5" />
              <Picker.Item label="Cliente 4" value="4" />
              <Picker.Item label="Cliente 3" value="3" />
              <Picker.Item label="Cliente 9" value="9" />
              <Picker.Item label="Cliente 8" value="8" />
            </Picker>

and function fetchData p>

fetchData() {
    var baseURL = 'http://192.168.100.11:3000/clients';
    fetch(baseURL, {
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
      }
    })
        .then((response) => response.json())
        .then((responseData) => {
          if(responseData.message){
            this.setState({isLoading: !this.state.isLoading});
            alert(responseData.message);
          }else{
            this.setState({isLoading: !this.state.isLoading, clients:responseData});
          }
        })
        .done();
  }

the thing is how can I make a collector when the data is retrieved. thank

Answer 1

You must set the selection elements based on your state by copying them, for example:

<Picker style={styles.picker}
        itemStyle={styles.items}
        selectedValue={this.state.client}
        onValueChange={(cli) => this.setState({client: cli})}>
            {this.state.clients.map((l, i) => {return <Picker.Item value={l} label={"Cliente " + i} key={i}  /> })}
    </Picker>

, "", , .

, : https://rnplay.org/apps/XfkfnQ