Get text from react-native-multiple-select

Question

Am using react-native-multiple-select to select items and its working fine, but then the values it store in the state is the id. i want to get the text of the selected items.

const items = [{
id: '92iijs7yta',
name: 'Ondo'
 }, {
 id: 'a0s0a8ssbsd',
name: 'Ogun'
}, {
id: '16hbajsabsd',
name: 'Calabar'
}, {
id: 'nahs75a5sg',
name: 'Lagos'
 }, {
id: '667atsas',
name: 'Maiduguri'
}, {
id: 'hsyasajs',
name: 'Anambra'
}, {
id: 'djsjudksjd',
name: 'Benue'
}, {
id: 'sdhyaysdj',
name: 'Kaduna'
}, {
id: 'suudydjsjd',
name: 'Abuja'
}
];

and the state

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

the multi-select-component

          <MultiSelect
              hideTags
              items={items}
              uniqueKey="id"
              ref={(component) => { this.multiSelect = component }}
              onSelectedItemsChange={this.onSelectedItemsChange}
              selectedItems={selectedItems}
              selectText="Companions"
              searchInputPlaceholderText="Search Items..."
              onChangeInput={ (text)=> console.log(text)}// am not getting this on the console.
               tagRemoveIconColor="#CCC"
              tagBorderColor="#CCC"
              tagTextColor="#CCC"
              selectedItemTextColor="#CCC"
              selectedItemIconColor="#CCC"
              itemTextColor="#000"
              displayKey="name"
              searchInputStyle={{ color: '#CCC' }}
              submitButtonColor="#CCC"
              submitButtonText="Submit"
            />

and the function that sets the selectedItems

   onSelectedItemsChange = selectedItems => {
    this.setState({ selectedItems }); 
    console.log(this.state.selectedItems);//here am getting ids ,i want to get the selected   item test,store it in array and and send to php server
  };

Neeko Neeko · Accepted Answer · 2019-12-11T16:04:42

Use onSelectedItemObjectsChange instead of onSelectedItemChange.

<MultiSelect
    ...
    onSelectedItemObjectsChange={this.onSelectedItemObjectsChange}
    ... />

This way, you will receive the whole object instead of only the key and thus, you'll be able to retrieve your name property.

onSelectedItemObjectsChange = selectedItems => {
  console.log(selectedItems); // should display [{id: '92iijs7yta', name: 'Ondo'}, ...]
};

See the documentation for reference.

Get text from react-native-multiple-select

1 Answers