How to show actual value and original option id in Select option UI kitten?

Question

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

Answer 1

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.