React Native - Render A List in Select Component from native-base-CodePudding

I used select component from native-base :

import { Select } from 'native-base';

Fake Data :

const OgrenciData = [
{key: '3', name: 'Emre', jobTitle: 'Pc', email: 'Emre.Sanli'},
{key: '5', name: 'Harun', jobTitle: 'Pc', email: 'Emre.Sanli'},
];

My Select Component is like this :

<Select
          selectedValue={baskanOgrenci}
          minWidth="200"
          accessibilityLabel="Giriş Türü"
          placeholder="Giriş Türü"
          mt={1}
          onValueChange={itemValue => setBaskanOgrenci(itemValue)}>              
</Select>

I have tried copying from FlatList component but it didn't work :(

I want my code to be like this if possible :

 {({OgrenciData}) => {
            return (
              <Select.Item
                label={OgrenciData.key}
                value={OgrenciData.key}
              />
            );
          }}

CodePudding user response：

I think you're missing the map function like this:

{OgrenciData.map(x => {
            return (
              <Select.Item
                label={x.key}
                value={x.key}
              />
            );
          })}

CodePudding user response：

import { Select } from 'native-base';

const OgrenciData = [
{key: '3', name: 'Emre', jobTitle: 'Pc', email: 'Emre.Sanli'},
{key: '5', name: 'Harun', jobTitle: 'Pc', email: 'Emre.Sanli'},
];

<Select
          selectedValue={baskanOgrenci}
          minWidth="200"
          accessibilityLabel="Giriş Türü"
          placeholder="Giriş Türü"
          mt={1}
          onValueChange={itemValue => setBaskanOgrenci(itemValue)}>              
</Select>

{OgrenciData.map(x => {
            return (
              <Select.Item
                label={x.key}
                value={x.key}
              />
            );
          })}