React Native Picker Item Issue

Question

I'm having serious issues with the RN Picker Item, whenever I try to load the picker Items I get the following error.

undefined is not an object (evaluating 'this.inputProps.value')

Here us the screenshot.

This is my code - Component - Basic

import React, { Component } from 'react';
import { Picker } from 'react-native';
export default class Basic extends Component {
    constructor(props) {
        super(props);
        this.state = {};
    }
    render() {
        var options = this.props.list.map((item, key) => {
            return <Picker.Item label={item} value={item} key={key} /> ;
        });
        return (
            <Picker mode="dropdown" selectedValue={this.props.selected} supportedOrientations={['portrait','landscape']} {...this.props}>
                { this.props.default && <Picker label={this.props.default} value=""/> }
            { options }
            </Picker>
        );
    }
}

File - Dynamic OptionSet This will use the Basic component to display the Picker.

class DynamicOptionSets extends Component {
    constructor(props) {
        super(props);
        this.state = {};
        this.ucfirst = this.ucfirst.bind(this);
        this._renderMain = this._renderMain.bind(this);
        this._renderSpinner = this._renderSpinner.bind(this);
    }

    componentWillMount() {
        InteractionManager.runAfterInteractions(() => {
            this.props["get"+this.ucfirst(this.props.option)]();
        });  
    }

    ucfirst(string) 
    {
        return string.charAt(0).toUpperCase() + string.slice(1);
    }
    render() {
        return (
            <View>
                {this._renderSpinner()}
                {this._renderMain()}
            </View>
        );
    }
    _renderMain(){
        if(!this.props[this.props.option]['data']){
            return null;
        }
        return (
            <Basic list={this.props[this.props.option]['data']} { ...this.props }/>
        )
       }
        _renderSpinner(){...}
    }
const mapDispatchToProps = (dispatch, ownProps) => {
    var {getCountries, getStates,
        getDepartments, getBranches,
        getBusinessSectors, getGenPostingGroup,
        getCustPostingGroup, getVatPostingGroup,
        getPricelist, getSalesPersons
        } = ActionCreators;
    return bindActionCreators({
        getCountries, getStates,
        getDepartments, getBranches,
        getBusinessSectors, getGenPostingGroup,
        getCustPostingGroup, getVatPostingGroup,
        getPricelist, getSalesPersons
    }, dispatch);
}

const mapStateToProps = (state) => {
    var {
        countries, countriesUpdate,
        states, statesUpdate,
        departments, departmentsUpdate,
        branches, branchesUpdate,
        businessSectors, businessSectorsUpdate,
        genPostingGroup, genPostingGroupUpdate,
        ccustPostingGroup, ccustPostingGroupUpdate,
        vatPostingGroup, vatPostingGroupUpdate,
        pricelist, pricelistUpdate,
        salesPersons, salesPersonsUpdate,
    } = state;
    return {
        countries, countriesUpdate,
        states, statesUpdate,
        departments, departmentsUpdate,
        branches, branchesUpdate,
        businessSectors, businessSectorsUpdate,
        genPostingGroup, genPostingGroupUpdate,
        ccustPostingGroup, ccustPostingGroupUpdate,
        vatPostingGroup, vatPostingGroupUpdate,
        pricelist, pricelistUpdate,
        salesPersons, salesPersonsUpdate,
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(DynamicOptionSets);

So now I can call the dynamic option set like a regular picker component only and specify the data group (option)

<DynamicOptionSets option="salesPersons" mode="dropdown" onValueChange={this._updateValue.bind(this, 'salesperson')} selectedValue={this.state.form_data.salesperson} />

I don't understand why this is happening as this is the exact way I render Pickers dynamically in RN. I have gone through the doc and followed the instructions as specified.

NB: I'm dynamically loading the picker so it's inside a component I'm calling whenever I need to, display a picker that should explain the {... this.props} on the picker component.

What's on line 23 in the componentDidMount function of Item.js? — Alvin Abia, Jun 19 '17 at 09:32

score 1 · Answer 1 · answered Jun 19 '17 at 09:55

1

You have a basic mistake in your code.

render() {
  var options = this.props.list.map((item, key) => {
    return <Picker.Item label={item} value={item} key={key} /> ;
  });
  return (
    <Picker mode="dropdown" selected={this.props.selected} supportedOrientations={['portrait','landscape']}>
        {/*_________________^^^^^^^^____  You should place `selectedValue` here instead */}
        { this.props.default && <Picker.Item label={this.props.default} value=""/> }
        { options }
    </Picker>
  );
}

answered Jun 19 '17 at 09:55

Slowyn

8,663
3
18
22

Thank's for pointing that out but it didn't solve it, also following the documentation the selected value should be a property on the component and not a part of its children, I updated my doc to explain my code a little more take a look at the NB at the bottom of my question, thanks still hoping for an answer. – Daniel Barde Jun 19 '17 at 10:04

React Native Picker Item Issue

1 Answers1