1

I am fetching data from API for the options to display in Select component of UI Kitten

data format is like this

const data = [
    {
       "id": 1, 
       "name": "General",
    },
    {
       "id": 2, 
       "name": "Other Category",
    },
    {
       "id": 3, 
       "name": "Public transport",
    },
    {
       "id": 4, 
       "name": "Help Support",
    }
]

It is showing the data in the dropdown but after selecting it is showing option1, option 2 etc but I want to show original data and onselect I want to get the original id of selected option because by default it is taking index which is starting from 0

I have used

  const [selectedIndex, setSelectedIndex] = useState(new IndexPath(0));

and I'm displaying my data like this

<Select
  selectedIndex={selectedIndex}
  status="basic"
  style={[STYLES.input]}
  value={selectedIndex}
  size="large"
  onSelect={(index) => handleFaqCategorySelection(index)}
>
  {data.map((item) => (
    <SelectItem title={item.name} index={item.id} />
  ))}
</Select>;

any idea how to do it ? I tried document by it is not clear how to work will dynamic data

Thanks in advance

Mohammed Ashfaq
  • 3,353
  • 2
  • 15
  • 22
HaryanviDeveloper
  • 1,005
  • 1
  • 8
  • 15

1 Answers1

0

Though it's nonsense to me, I see only one way to set selected option label by filtering options again and assigning it value. Until you find a better way you can try like below

<Select
  selectedIndex={selectedIndex}
  status="basic"
  size="large"
  value={data[selectedIndex.row]?.name}
  onSelect={(index) => {
    setSelectedIndex(index);
  }}
>
  {data.map((item, i) => (
    <SelectItem title={item.name} />
  ))}
</Select>;

Note: If you use multiSelect={true} then you have to provide value={[]} as an array with labels or list of elements to render.

Ravikumar
  • 2,085
  • 12
  • 17
  • hi @Ravikumar thanks for answer how do i will get the actual id of selected option because actual id will be different from index – HaryanviDeveloper Apr 09 '21 at 17:36
  • Seems that's not possible as per their component definitions [SelectItemProps](https://github.com/akveo/react-native-ui-kitten/blob/849fb480ee4e215a6c99ced01c82658a25d24e0c/src/components/ui/select/selectItem.component.tsx#L47) and [SelectProps](https://github.com/akveo/react-native-ui-kitten/blob/849fb480ee4e215a6c99ced01c82658a25d24e0c/src/components/ui/select/select.component.tsx#L59). At this moment the only way is remembering/retaining the indexes based on the options rendered order then finding the corresponding items/ids when needed. – Ravikumar Apr 09 '21 at 18:56