React-native-multiple-select: Cannot read the property 'getSelectedItemsExt' of undefined - react-native

Question

I am building an App and referring this link
i implemented same code for my App, but i am getting error "Cannot read the property 'getSelectedItemsExt' of undefined".
One more error is "submit" button is also not showing up. I have tried all the ways but failed.
import React, { Component } from 'react';
import { AppRegistry, StyleSheet, TextInput, View, ListView, Alert, Button, Platform, ToastAndroid, TouchableOpacity, ActivityIndicator, Text, Picker, ScrollView }
from 'react-native';
import { StackNavigator } from 'react-navigation';
import MultiSelect from 'react-native-multiple-select';
class manage_publishers extends Component {
static navigationOptions = {
title: 'Manage Publishers',
};
constructor() {
super()
this.state = {
isLoading: true,
selectedPublishers1:[],
publishersByCategory: [],
publishersByClient: [],
publishersByGroup: [],
dataSource:[]
}
}
componentDidMount()
{
const base64 = require('base-64');
fetch('APIURL'+this.props.navigation.state.params.id,
{
method: 'GET',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
"Authorization": "Basic " + base64.encode("ABC:XYZ")
}
}).then((response) => response.json()
)
.then((responseJson) => {
this.setState({
categories: responseJson.PublisherByCategory,
}, function () {
});
})
.catch((error) => {
console.log("error in category");
console.log(error);
});
}
onSelectedPublishersByCategoryChange = (publishersByCategory) => {
console.log(publishersByCategory);
this.setState({ publishersByCategory });
}
render() {
const { navigate } = this.props.navigation;
if (this.state.isLoading) {
return (
<View style={{ flex: 1, paddingTop: 20 }}>
<ActivityIndicator />
</View>
);
}
return ([
<View style={{flex: 1,paddingTop: (Platform.OS === 'ios') ? 20 : 20, padding: 5}}>
<Text style={{ padding: 5, fontSize: 35, backgroundColor: '#2196F3', marginBottom: 7 }}>
Manage Publishers
</Text>
<MultiSelect
items={this.state.categories}
uniqueKey="id"
ref={(component) => { this.multiSelect = component }}
onSelectedItemsChange={this.onSelectedPublishersByCategoryChange}
selectedItems={this.state.publishersByCategory}
selectText="Publishers by Category"
searchInputPlaceholderText="Search Publisher..."
onChangeInput={ (text)=> console.log(text)}
altFontFamily="ProximaNova-Light"
tagRemoveIconColor="#CCC"
tagBorderColor="#CCC"
tagTextColor="#CCC"
selectedItemTextColor="#CCC"
selectedItemIconColor="#CCC"
itemTextColor="#000"
displayKey="name"
searchInputStyle={{ color: '#CCC' }}
submitButtonColor="#CCC"
submitButtonText="Submit"
/>
</View>,
<View>
{this.multiSelect.getSelectedItemsExt(selectedItems)}
</View>
]);
}
}
});
module.exports = manage_publishers;
Please have a look at this and provide me solution, I'll be very thankful .

Answer 1

I had that same issue, and I solved adding a AND condition:
{this.multiSelect && this.multiSelect.getSelectedItemsExt(selectedItems)}

Answer 2

If you are using functional components you can do like this,
create ref like this,
const multiSelect = useRef(null)
Access the getSelectedItemsExt function like this,
<View>
{multiSelect.current && multiSelect.current.getSelectedItemsExt &&
multiSelect.current.getSelectedItemsExt(countries)}
</View>

Answer 3

It happened because you called a method before the reference has been set.
Use this code:
<View>
{ this.multiSelect ? this.multiSelect.getSelectedItemsExt(selectedItems) : null}
</View>
Reference to this issue:
https://github.com/toystars/react-native-multiple-select/issues/58#issuecomment-364136438