MultiSelect in react native

Question

I am trying to implement the MultiSelect in react native. I have referred from this link " https://github.com/toystars/react-native-multiple-select ". But unfortunately i am not able to view the name in list of the drop down showing " No item to display ".

image:

For the name to be display in dropdown, data is taken from items prop which should be of the form of javascript array of object. Please help me out to solve this issue.

import React, {Component} from 'react';
import { SectionList, Image, StyleSheet, Text, View, ScrollView, ListView, 
AsyncStorage, Button, TextInput, TouchableOpacity, KeyboardAvoidingView  } 
from 'react-native';
import { Constants } from 'expo';
import ActionButton from 'react-native-action-button';
import Icon from 'react-native-vector-icons/Ionicons';
import { StackNavigator } from 'react-navigation';
import { Ionicons } from '@expo/vector-icons';
import TextField from 'react-native-md-textinput';
import MultiSelect from 'react-native-multiple-select'; 

export default class SendNotification extends Component {

static navigationOptions = {
title: 'Send Notification',
};

constructor (props) {
super(props)
this.state = {
arr_user: [],           
} 
}

componentWillMount() {
this.getUsers();
};

getUsers = async () => {
const { page, seed } = this.state;
await fetch('.....api') 
  .then((response) => response.json()) 
  .then((responseJson) => { 
      
   this.setState({arr_user: responseJson.results});

 }).catch((error) => { console.error(error); });
  
   
};

focus () {
this.textInput && this.textInput.focus()
};  

onSelectedItemsChange = (selectedItems) => {

console.log(JSON.stringify(selectedItems));
this.setState({selected_user: JSON.stringify(selectedItems)});
};

render() {

return (
  
  <View style={{flex:1, backgroundColor:'#ffffff'}}>

    <ScrollView>
    
      <MultiSelect
        items={this.state.arr_user}
        uniqueKey="id"
        onSelectedItemsChange={this.onSelectedItemsChange}
        selectedItems={[]}
        selectText="Pick Users"
        searchInputPlaceholderText="Search Users..."
        tagRemoveIconColor="#CCC"
        tagBorderColor="#CCC"
        tagTextColor="#CCC"
        selectedItemTextColor="#CCC"
        selectedItemIconColor="#CCC"
        itemTextColor="#000"
        searchInputStyle={{ color: '#CCC' }}
        submitButtonColor="#CCC"
        submitButtonText="Submit"
      />

      </ScrollView>
  </View>

 );
} 
}

nils nils · Accepted Answer · 2017-10-09T14:19:53

Aren't you mixing up async / await with the "classic" (fetch) promises syntax? So instead of writing

await fetch(YOUR_API) 
.then((response) => response.json()) 
.then((responseJson) => ...

you should write

... async () => {
   const  { page, seed } = this.state;
      try {
         const response = await fetch('..//api');
         const responseJson = await response.json();
         [DO CONDITIONAL CHECKS IF NEEDED]
         this.setState({ arr_user: responseJson });
      } catch (e) {
         console.log(e);
      }
}

Otherwise you could write your fetch() the more classic way but without the "async/await" Some usefull introduction into async/await was this article to me: 6 Reasons Why JavaScript’s Async/Await Blows Promises Away (Tutorial)

MultiSelect in react native

1 Answers