How can I bind an object to a SelectItem component?

Question

Can anyone please help me on this? I'm using UI-Kitten's select and selectiem components, and I need to know how can I bind an object to a SelectedItem component?

I would like to pass some value as a binding object:

data={
 (['OPT1', 'Option 1'],
  ['OPT2', 'Option 2'],
  ['OPT3', 'Option 3'],
  ['OPT4', 'Option 4'],
  ['OPT5', 'Option 5'])
}

Then, I'll like to render each select's option with something like this:

const renderOption = (title: string, key: string) => (
     <SelectItem title={title} key={key} />
  );

This option could be populated with a map function:

<Select
  style={styles.inputSetting}
  textAlign="right"
  size="small"
  placeholder={placeholder}
  value={value}>
  {data && data.map(renderOption)}
</Select>

This won't work because map function expects (value: never, index: number), and SelectItem component doesn't have a "key" prop.

I would need to get the key value and not the display value.

Any help pointing me to the correct direction would be appreciated.

score 1 · Answer 1 · answered May 28 '20 at 18:16

1

you can use index as key like this

<Select
  style={styles.inputSetting}
  textAlign="right"
  size="small"
  placeholder={placeholder}
  value={value}>
  {data && data.map((dataItem,index)=>renderOption({title:dataItem,key:index}))}
</Select>

answered May 28 '20 at 18:16

Muhammad Numan

23,222
6
63
80

Thanks a lot, Muhammad, for your answer! That helps me with the map part, but still can't figure out how to use UI Kitten's SelectItem to bind to key/value pairs. – GoldenLight May 31 '20 at 00:18
I was thinking of having two arrays: one for the populated SelectItems and a separate one for the data. Then, search for user's selected value in the data object. However, if two values share the same title (display text), I could have problems. – GoldenLight May 31 '20 at 00:20
sorry I did not understand your comment. i am sure you did not need two array. you can use index as key – Muhammad Numan May 31 '20 at 09:21

score 0 · Answer 2 · answered May 28 '20 at 05:02

0

the first thing that can be modified is the structure of your data!its a 2x5 matrix in a unstructured format! and as the .map() functions is for arrays so cant use it for , There is no native map for Objects .but if data structure coming from server is out of your control so you can do something like mapping through keys and values with object methods

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Object/values

i hope it helps

answered May 28 '20 at 05:02

Amir Doreh

1,369
1
13
25

Hello, Amir. Thanks a lot for your answer ! Actually, this is not a model coming from a server, so yes, I can handle the data in it. I could use something like this: data={[ {key: 'OPT1', value: 'Option 1'}, {key: 'OPT2', value: 'Option 2'}, {key: 'OPT3', value: 'Option 3'}, {key: 'OPT4', value: 'Option 4'}, {key: 'OPT5', value: 'Option 5'}, ]} What I would like to know is how can I bind it to a SelectItem of UI Kitten element, since I can't find a KEY prop in it... – GoldenLight May 28 '20 at 12:21
Dear professor i didn’t work with UI kitten yet unfortunately , but the problem i found was that map data , but i searched for that i found this link https://github.com/akveo/react-native-ui-kitten/issues/927 i hope it can help you @GoldenLight – Amir Doreh May 28 '20 at 16:27

score 0 · Answer 3 · answered Apr 20 '21 at 19:46

this seems to work for me

<Select
   style={styles.select}
   placeholder="Default"
   value={displayValue}
   selectedIndex={selectedIndex}
   onSelect={(index) => setSelectedIndex(index as any)}>
   {data.address.map((item, i) => (
     <SelectItem title={item.streetNumber} key={i} />
   ))}
</Select>

How can I bind an object to a SelectItem component?

3 Answers3