Bind Picker.Item 'label' from an array in React Native

Question

I'm a newbie and want to know how can I pick 'label' of 'Picker.Item' from an array. I have an array 'Account[]' each of its element is an object of 'AccountSchema' shown below
Code For Dropdown List

<Picker
style={{width:'70%'}}
selectedValue={this.state.PickerValue}
onValueChange={(itemValue,itemIndex) =>this.setState({PickerValue:itemValue})}>
                   <Picker.Item label="Select Name of A/C" value=""/>
                   <Picker.Item label="Salary A/C" value="salary" />
                   <Picker.Item label="Rent A/C" value="Rent"/>
</Picker>

Database (Schema) & Method to get all Accounts

export const AccountSchema = {
name: ACCOUNT_SCHEMA,
primaryKey: 'id',
properties: {
    id: 'int',    // primary key
    name: { type: 'string', indexed: true },
    type: 'string',
    balance: 'int',
    note:'string',
    creationDate: 'date',
}
};

export const queryAllAccounts = () => new Promise((resolve, reject) => {
    Realm.open(databaseOptions).then(realm => {
        let allAccounts = realm.objects(ACCOUNT_SCHEMA);
        resolve(allAccounts);
    }).catch((error) => {
         reject(error);
    });;
});

In dropdown list I want to show Account name, So its necessary to show 'account.name' in 'label' foreach.

Roy Wang · Accepted Answer · 2018-04-22 10:55:27Z

1

You can map your data to the Picker.Item component:

  <Picker
    style={{ width: '70%' }}
    selectedValue={this.state.PickerValue}
    onValueChange={(itemValue, itemIndex) => this.setState({ PickerValue: itemValue })}
  >
    {accounts.map(acct => <Picker.Item key={acct.id} label={acct.name} value="" />)}
  </Picker>;

answered Apr 22, 2018 at 10:55

Roy Wang

11.3k2 gold badges26 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Faisal Ahmed Over a year ago

thanks this worked for me by taking the array with current state :) .. {this.state.Accounts.map(acct => <Picker.Item key={acct.id} label={acct.name} value="" />)}

Collectives™ on Stack Overflow

Bind Picker.Item 'label' from an array in React Native

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related