React-native: Picker: undefined is not an object (evaluating 'this.props.children[position].props')

[alexsotocx]

Hello, I'm getting an error when I change the value on the picker. The strange thing is that only happens with the generated from loops. See the code:

 return (
        <Picker
          selectedValue={report.eventTypeId}
          mode="dropdown"
          onValueChange={(selected) => {
            this.setState({selected});
          }}
        >
          <Picker.Item key={0} label={'Tipo de evento'} value={''} />//No error when selected
          <Picker.Item key={1} label={'Otro'} value={'2'} />//No error when selected
          {
            [1,2,3].map((_, index) => {
              return (<Picker.Item key={index + 3} label={`${_}`} value={index + 3} />); //When i Selected an error is throw
            })
          }
        </Picker>
      );

Then next error is throw...

undefined is not an object (evaluating 'this.props.children[position].props')
_onChange
    PickerAndroid.android.js:106
invokeGuardedCallback
    ReactErrorUtils.js:26
executeDispatch
    EventPluginUtils.js:89
executeDispatchesInOrder
    EventPluginUtils.js:112
executeDispatchesAndRelease
    EventPluginHub.js:44
executeDispatchesAndReleaseTopLevel
    EventPluginHub.js:55
forEachAccumulated
    forEachAccumulated.js:27
processEventQueue
    EventPluginHub.js:231
runEventQueueInBatch
    ReactEventEmitterMixin.js:18
handleTopLevel
    ReactEventEmitterMixin.js:29
<unknown>
    ReactNativeEventEmitter.js:125
perform
    Transaction.js:138
batchedUpdates
    ReactDefaultBatchingStrategy.js:63
batchedUpdates
    ReactUpdates.js:98
_receiveRootNodeIDEvent
    ReactNativeEventEmitter.js:124
receiveEvent
    ReactNativeEventEmitter.js:138
__callFunction
    MessageQueue.js:204
<unknown>
    MessageQueue.js:95
guard
    MessageQueue.js:41
callFunctionReturnFlushedQueue
    MessageQueue.js:94

I'm using react native 0.33

[alexsotocx]

Strange thing... If a remove

<Picker.Item key={0} label={'Tipo de evento'} value={''} />//No error when selected
 <Picker.Item key={1} label={'Otro'} value={'2'} />//No error when selected

It starts to work

[alexsotocx]

The solution that I found was to create everything in a array including the blank options, and then only loop through the array creating the PickerItems.

renderEventPicker() {
    let { project } = this.props;
    let { report } = this.state;
    if(project.eventTypes.length > 0) {
      let projectEventTypes = [
        {label: 'Tipo de evento', value: null}
      ];
      project.eventTypes.forEach((eventType) => projectEventTypes.push({label: eventType.name, value: eventType.id}));
      return (
        <Picker
          selectedValue={report.eventTypeId}
          mode="dropdown"
          onValueChange={(value) => {report.eventTypeId = value; this.setState({report});}}
        >
          {projectEventTypes.map((eventType, index) => <Picker.Item key={index} {...eventType} />)}
        </Picker>
      );
    }
    return null;
  }

[ryankask]

This has come up quite a few times. As you've noticed, on Android the children must be an array. There's actually a PR to change this: https://github.com/facebook/react-native/pull/8153

[ryankask]

@facebook-github-bot duplicate #8153

[ghost]

@ryankask tells me this issue is a duplicate of #8153. Let's discuss there, closing this one.

[minhchu]

:+1: for alex's solution