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>

 );
} 
}

Aniket Parab · Accepted Answer · 2017-10-10 10:40:18Z

0

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)

edited Oct 10, 2017 at 10:40

Aniket Parab

391 gold badge2 silver badges5 bronze badges

answered Oct 9, 2017 at 14:19

nils

811 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Aniket Parab Over a year ago

I have tried but still it is not working...still the same issue " No item to display"

nils Over a year ago

Have you debugged your responseJson maybe that response is wrapped in another object? Haven't used that <MultiSelect> component by myself, will try it later on.

Aniket Parab Over a year ago

Actually i am fetching the data from API in the JSON format, my data would be somewhat like this [{"id":"14","name":"Ondo"},{"id":"15","name":"Ogun"},{"id":"16","name": "Calabar"}]

Aniket Parab Over a year ago

CORRECTED: Actually i am fetching the data from API in the JSON format, my data would be somewhat like this {"results":[{"id":"14","name":"Ondo"},{"id":"15","name":"Ogun"},{"id":"16","name": "Calabar"}]} I dont know what i am doing wrong?!!

Mustapha Babatunde Over a year ago

@AniketParab are you sure this isn't a typo issue? Based on the comment above, your API response comes with results whereas you are accessing result in the code you pasted below.

|

Jonas Beck · Accepted Answer · 2024-01-13 08:40:06Z

0

I am not sure which react native version you are using on that project. However componentWillMount is deprecated and will not work. You can try with UNSAFE_componentWillMount or UNSAFE_componentDidMount instead.

answered Jan 13, 2024 at 8:40

Jonas Beck

5412 silver badges7 bronze badges

Collectives™ on Stack Overflow

MultiSelect in react native

2 Answers 2

6 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related