akveo / react-native-ui-kitten

:boom: React Native UI Library based on Eva Design System :new_moon_with_face::sparkles:Dark Mode
https://akveo.github.io/react-native-ui-kitten/
MIT License
10.28k stars 951 forks source link

Select component shows Option 1, Option 2, Option 3., etc... Instead of title prop when selected #1157

Closed jaooe closed 4 years ago

jaooe commented 4 years ago

šŸ› Bug Report

As per title, the select input shows Option 1, 2, 3 etc... When an option is selected, regardless of the provided 'title' prop

To Reproduce

Steps to reproduce the behavior:

const [selectedIndex, setSelectedIndex] = useState();
<Select
  label="Select"
  selectedIndex={selectedIndex}
  onSelect={(i) => setSelectedIndex(i)}
 >
  {[1,2,3].map((i) => (
    <SelectItem title={i} />
  ))}
</Select>

Expected behavior

Title provided through prop should be shown in the select

UI Kitten and Eva version

Package Version
"@eva-design/eva": "^2.0.0",
"@ui-kitten/components": "^5.0.0",

Environment information

System: OS: Linux 5.3 Ubuntu 19.10 (Eoan Ermine) CPU: (4) x64 Intel(R) Core(TM) i5-6200U CPU @ 2.30GHz Binaries: Node: 14.3.0 - /usr/bin/node Yarn: 1.22.4 - /usr/bin/yarn npm: 6.14.5 - /usr/bin/npm npmPackages: react: ~16.9.0 => 16.9.0 react-native: https://github.com/expo/react-native/archive/sdk-37.0.1.tar.gz => 0.61.4

artyorsh commented 4 years ago

Please see Display Value example of the documentation

jayan2019 commented 4 years ago

Use value instead of selectedIndex

RWOverdijk commented 4 years ago

That's just poor documentation. Who would want to show "Option 1" etc? I think this should be fixed in the "Select simple usage" docs.

I can make a PR just point me in the right direction

Lekhrajk commented 3 years ago

I am fetching data from API call I need to display value and on select i need to send id of actual data but I am not able to do it it is still showing option 1 ,2 etc

alexander0205 commented 3 years ago

Use value instead of selectedIndex

Apparently the select-kitten in case you haven't sent the property value , they show "Option N" by the index of selectedIndex. So is required set the value with the text to show in the current select

value ReactText \ (TextProps) => ReactElement String, number or a function component to render for the selected options. By default, callsĀ toString()Ā for each index in selectedIndex property. If it is a function, expected to return a Tex