React Native Searchable Dropdown shows blank fields - react-native

Question

I 'm trying to use Searchable Dropdown to show an array of objects:
<SearchableDropdown
style={{height:'100%'}}
onTextChange={(text) => console.log(text)}
onItemSelect={(item) => this.sendrequest(JSON.stringify(item.title))}
containerStyle={{padding: 5}}
textInputStyle={{
padding: 12,
borderWidth: 1,
borderColor: '#ccc',
backgroundColor: '#FAF7F6',
}}
itemStyle={{
padding: 10,
height:50,
marginTop: 2,
backgroundColor: '#FAF9F8',
borderColor: '#bbb',
borderWidth: 1,
}}
itemTextStyle={{
color: '#222',
}}
itemsContainerStyle={{
maxHeight: '60%',
}}
items={this.state.hospitals}
defaultIndex={1}
placeholder="placeholder"
resetValue={false}
underlineColorAndroid="transparent"
/>
Following is my "this.state.hospitals"
"hospitals": [
{
"title": "Holy Family Hospital Rawalpindi",
"distance": "71.45372179866516"
},
{
"title": "Fauji Foundation Hospital Islamabad",
"distance": "62.242918533343705"
},
{
"title": "PIMS Hospital Islamabad",
"distance": "80.0576175928936"
}
I want the titles to be displayed in the dropdown but it shows nothing. Everything else works corectly, but there are just blank fields to scroll through. Any idea what I'm doing wrong?

Answer 1

SearchableDropdown doesn't have any custom prop to handle keyName of dataObject inside array.
you're sending key as title in object but it's access keyName as name. so you need to format your data before sending it as items to that component
let formatHospitalsData = [...this.state.hospitals];
formatHospitalsData = formatHospitalsData.map((item) => {
return {
distance: item.distance,
name: item.title
}
});
after replacing the key, send it to SearchableDropdown Component
[
{
"name": "Holy Family Hospital Rawalpindi",
"distance": "71.45372179866516"
},
{
"name": "Fauji Foundation Hospital Islamabad",
"distance": "62.242918533343705"
},
{
"name": "PIMS Hospital Islamabad",
"distance": "80.0576175928936"
}
]