Bind Picker to list of Picker.Item in React Native

Question

I'm sure there is a way to do this, but I just can't see how yet.

What I'd like to do, is add a Picker component, but rather than hard-code the list of items, fetch this from a service and have the Picker bound to something I can populate later.

Here's what I have, but my app won't even run now. Any ideas please?

'use strict';
var React = require('react-native');
var {
    Picker,
    Text,
    View
} = React;

var AvailableServices = React.createClass({
    getInitialState() {
        var fetchServicesUri = 'http://some.url/available_services';
        fetch(fetchServicesUri)
            .then((response) => response.json())
            .then((responseJson) => {
                console.log(responseJson);
                var services = [];
                for(var service in responseJson.services) {
                    services.push(<Picker.Item label={service.Label} value={service.Value}/>);
                }
                this.setState({
                    services: services
                });
            })
            .catch((error) => {
                console.warn(error);
            })
            .done();
        return {
            services: [],
            selectedService: null
        }
    },

    render() {
        return (
            <View>
                <Text>Pick a service</Text>
                <Picker
                    selectedValue={this.state.selectedService}
                    onValueChange={(service) => this.setState({selectedService:service})}
                >
                    {this.state.services}
                </Picker>
            </View>
        );
    }
});

module.exports = AvailableServices;

Joshua Pinter · Accepted Answer · 2017-03-10 17:27:04Z

54

You should probably set up your initial state as the empty array, then call your service on componentWillMount or componentDidMount. I've set up something that works with some dummy data here, and pasted the code below.

'use strict';
var React = require('react-native');
var {
    Picker,
    Text,
    View,
      AppRegistry
} = React;

var PickerItem = Picker.Item;

var SampleApp = React.createClass({
    getInitialState() {
        return {
            services: ['a', 'b', 'c', 'd', 'e'],
            selectedService: 'a'
        }
    },

    componentDidMount() {
        setTimeout(() =>  { 
         this.setState({
          services: [ 'one', 'two', 'three', 'four', 'five' ]
         }) 
        }, 3000)
    },

    render() {
        let serviceItems = this.state.services.map( (s, i) => {
            return <Picker.Item key={i} value={s} label={s} />
        });

        return (
            <View>
                <Text>Pick a service</Text>
                <Picker
                    selectedValue={this.state.selectedService}
                    onValueChange={ (service) => ( this.setState({selectedService:service}) ) } >

                    {serviceItems}

                </Picker>
            </View>
        );
    }
});


AppRegistry.registerComponent('SampleApp', () => SampleApp);

edited Mar 10, 2017 at 17:27

Joshua Pinter

47.9k23 gold badges261 silver badges258 bronze badges

answered Feb 14, 2016 at 21:33

Nader Dabit

53.8k14 gold badges110 silver badges91 bronze badges

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

4 Comments

Mike Over a year ago

Thanks for your answer - I've tried it out and definitely getting a lot further. I now get this error: "TypeError: undefined is not an object (evaluating 'this.state.services.map')". It's some issue with parsing the returned JSON from the service call to an object. If I try with your example and use some hard-coded chars it works just fine. Thanks!

suark_krab Over a year ago

@Michael were you calling .map on an array?

grantwparks Over a year ago

Can I ask what PickerItem is used for? I don't see it referenced anywhere. (I'm new to RN and trying to understand.)

MarAvFe Over a year ago

I fixed the map error by writing my own loop

const srvItems = [];         for (var i = 0; i < this.state.service.length; i++) {             s = this.state.service[i];             srvItems.push(<Picker.Item key={i} value={s} label={s} />);         }

and then writing {srvItems} inside the picker. Then works like a bliss.

Ilarion Halushka · Accepted Answer · 2019-03-28 09:58:48Z

9

IMPORTANT: if you try to iterate an array of numbers with map then don't forget that label property of Picker.Item should be converted to string:

const pickerItems = [1,2,3].map(i => (
      <Picker.Item label={i.toString()} value={i} />
));

answered Mar 28, 2019 at 9:58

Ilarion Halushka

2,35320 silver badges14 bronze badges

Comments

Tarik Kdiry · Accepted Answer · 2019-01-03 22:04:29Z

No Loops required, here how i did in my react native based project, similar to above answer to bind or add data dynamically in Picker

import React, {Component} from 'react';
import {Picker,View} from 'react-native';
export default class SampleApp extends Component  {

    constructor(props){
        super(props);
        // HARD CODED DATA , YOU CAN REPLACE THIS DATA  WITH API CALL DATA IN ComponentDidMount() 
       //or in Constructor because countryData is not state.
        this.countryData = ["India","Pakistan","USA"];
        // STATE    
        this.state({
            selectedCountry : null
        });
    }
    // Our country list generator for picker
    countryList = () =>{
        return( this.countryData.map( (x,i) => { 
              return( <Picker.Item label={x} key={i} value={x}  />)} ));
    }
    // RENDER
    render() {
        return (
            <View>
                <Picker
                    selectedValue={this.state.selectedCountry}
                    onValueChange={ (value) => ( this.setState({selectedCountry : value}) )}>
                    { this.countryList() }
                </Picker>
            </View>
        );
    }
}

Hope you find my example simple to understand ;)

Yash Mochi · Accepted Answer · 2018-10-24 07:37:20Z

2

You can try this one.

<Picker
      selectedValue={this.state.facilityId}
      style={{ width: '100%' }}
      onValueChange={(itemValue) => this.setState({ facilityId: itemValue, facilityPicked: true })}>
      {facilities.map((facility, i) => {
        return <Picker.Item key={i} value={facility.id} label={facility.facility_name} />
      })}
</Picker>

Here, facilities is a list of object having id and facility_name as key.

answered Oct 24, 2018 at 7:37

Yash Mochi

1,03711 silver badges19 bronze badges

Comments

Abhishek Garg · Accepted Answer · 2019-01-04 07:01:03Z

0

I got the same error. The problem is not with picker but instead, with your code.

let items = props.category.map((item,index) => {
     return ( <Picker.Item key={index} label={item.category} value={item.category} /> )
   })
  return(
         <Picker style={styles.pickerStyle}>{items}</Picker>
        );

Instead of using item.category, i was using item.name which caused my app to stop. So check the value of your data.

edited Jan 4, 2019 at 7:01

Abhishek Garg

3,29231 silver badges33 bronze badges

answered Oct 6, 2018 at 13:21

Rahul Kumar

1

Comments

Ritveak · Accepted Answer · 2020-01-31 06:52:30Z

Question:

I am using map which is a data structure introduced in JS in ES6.

I am using Picker for the dropdown. here's my code :

<Picker
            selectedValue={this.state.branch}
            style={styles.fieldPicker}
            mode="dropdown"

            onValueChange={(itemValue, itemIndex) =>
              this.setState({branch: itemValue})
            }>

            {/* Data Binding */}

                {this.state.branchData.forEach((name, id) => 
                      {
                      return <Picker.Item key={id} value={id} label={name} />;
                      })
                }



          </Picker>

I checked if name and id are being correctly accessed by logging it. The issue is that I am not able to see the dropdown getting populated.

Collectives™ on Stack Overflow

Bind Picker to list of Picker.Item in React Native

6 Answers 6

4 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

4 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related