Picker : undefined is not an object :child.props.value

[nooralahzadeh]

I am trying to return Picker.Item from an array but I face the following error:

undefined is not an object :child.props.value
<Picker style={{ paddingLeft: 100, width:(Platform.OS === 'ios') ? undefined : 120 }}
iosHeader="Selecy"
mode="dropdown"
selectedValue="0"
inLineLabel={true}>
<Picker.Item label="Item 0" value="0" />
{this.props.ItemList.map((member,key)=>{
<Picker.Item label={member.props} value={member.value} />
})
}
</Picker>

[luoyjx]

+1

[horiuchie]

I guess that will happen in the following cases:

A) rendering just one
Ref: #921

  <Picker ...>
    <Picker.Item ... />
  </Picker>

B) rendering one and an array of items

  <Picker ...>
    <Picker.Item ... />
    {
      this.props.ItemList.map((member, key) => <Picker.Item ... />)
    }
  </Picker>

C) not returning element in callback

<Picker ...>
  {
    this.props.ItemList.map((member, key) => {
      // either use return statements or does not use brackets
      // one more thing, use key attribute if rendering from an array
      <Picker.Item key={key} ... />
    })
  }
</Picker>

[nooralahzadeh]

@horiuchie so this is a bug!

[horiuchie]

I agree.
As a workaround, it might work if put your ”Item0” into the array, then make the callback returns element.

[nooralahzadeh]

@horiuchie Thanks , I make it by using C) not using the brackets and puting the Item0 in the array

[horiuchie]

sure :)
I hope that B) will be fixed someday because it's a common way of rendering, though I don't think high priority.

screenshot

[lukewlms]

This appears to be a fairly strong limitation.

We want to have a dropdown that must be selected, meaning when it starts it says "Select a value..."

In Android, the "placeholder" property is not supported on Native Base so we have to include this item at the top of the list; however because of the limitation in this issue that is impossible. Currently we have no workaround for this.

[shivrajkumar]

NativeBase picker for android is a direct implementation of react-native's picker. Since React Native Picker doesn't have this yet, there is no way of doing this as of now.

[lukewlms]

@shivrajkumar This does appear to be a NativeBase bug - this type of example from @horiuchie
works fine for us in React Native on Android but breaks in NativeBase:

B) rendering one and an array of items

  <Picker ...>
    <Picker.Item ... />
    {
      this.props.ItemList.map((member, key) => <Picker.Item ... />)
    }
  </Picker>

[sankhadeeproy007]

Hi @lukecwilliams, this is our implementation of the picker. Are we missing something here?

[lukewlms]

That looks pretty straightforward.

This code without the first NBPicker.Item works for us, but with the first NBPicker.Item breaks. I'm not sure why @horiuchie indicated this situation should break - I'm not aware of why that would be the case, but it does break for us. Sorry I can't be of more help. Unfortunately, in RN we get a generic "shadowView super (of ID 76) not found" error that doesn't help us debug.

        <NBPicker
          iosHeader="Select one"
          mode="dropdown"
          placeholder="Select a workout"
          onValueChange={(value: string) => "testing" }
        >
          <NBPicker.Item key={ "someKey" }
            label={ "Select one..." }
            value={ "someValue" } />;
          {
            this.props.userData.standardWorkoutDefinitions.edges
              .map((edge: any) => {
                console.log(edge.node.id);
                return <NBPicker.Item key={ edge.node.id }
                  label={ edge.node.description }
                  value={ edge.node.id } />;
                },
              )
          }
        </NBPicker>

[xanderdeseyn]

We are running into the same problem here, while simply using map:

<Picker
        iosHeader={ this.props.selectionText ? this.props.selectionText : "Select" }
        mode="dropdown"
        selectedValue={this.state.selected}
        onValueChange={this.onValueChange.bind(this)}
      >
        { this.props.values.map( value => (<Picker.Item key={value} label={value} value={value} />) ) }
</Picker>

Anyone found a solution yet?

[xanderdeseyn]

We found the solution... the bug is quite incredible really.

We are using ImmutableJS for our redux state. this.props.values is an immutable list. When you go and look at the source code of Picker.ios.js, you see that it is using lodash's find function. Apparently, they can't handle an immutable list even though it works throughout the rest of React Native.

The (ugly) solution is thus:
{ this.props.values.toArray().map( value => (<Picker.Item key={value} label={value} value={value} />) ) }

[Suraj-Tiwari]

Recently I've faced the same issue, This might be a less ugly solution
This is hapenning because of this

<Picker.Item label="Item 0" value="0" /> /// **<- Issue is here due to this hard coded Item** 
{this.props.ItemList.map((member,key)=>{<Picker.Item label={member.props} value{member.value} />
})

render() {
  return (
    <Picker mode='dropdown' selectedValue={selectedValue} onValueChange={onValueChange} >
      { make_list(['pass','your','desire','list']) }
    </Picker>
  )}
function make_list(list){
        d = list.map((data,i) => {
            return (
                <Picker.Item label={data} value={i}/>
            )
        })
       // i did this because no need in ios :P 
        if(Platform.OS === 'android'){
            d.unshift(<Picker.Item label="Select" />)
        }
        return d;
      //and that's how you are ready to go, because this issue isn't fixed yet (checked on 28-Dec-2017)
 }

[kodamirmo]

Any update?

[vbspace]

any updates ?

[ahmadsyamim]

any update here?

[SupriyaKalghatgi]

Fixed with 2.7.1

[ap050492]

Facing same issue...

<Picker
  mode="dropdown"
  placeholder="Choose One"
  textStyle={style.pickerTextTyle}
  selectedValue={this.state.categoryValue}
  style={style.pickerStyle}
  onValueChange={this.onValueChangeDD.bind(this,1)}
  headerTitleStyle={style.pickerHeaderTitleStyle}>
      <Item label="Item 0" value="0" />
      {this.state.categoryData.map((member, key) => {
            <Item label={member.value} value={member.value} />
        })
      }
</Picker>

[akhil-ga]

@ap050492 the map function misses return statement.

Change this

 {this.state.categoryData.map((member, key) => {
            <Item label={member.value} value={member.value} />
        })
      }

to

{this.state.categoryData.map((member, key) => 
            <Item label={member.value} value={member.value} key={key}/>
        )
      }

or

{this.state.categoryData.map((member, key) => {
           return <Item label={member.value} value={member.value} key={key}/>
        })
      }

[ranjanpoudel1234]

Thanks @akhil-geekyants for the solution, the last one worked great for me. Was missing the return

[marcocesarato]

After upgrade from version 2.12.2 to 2.13.4 I've this issues.

My code is like this format:

{this.state.categoryData.map((member, key) => {
           return (<Picker.Item label={member.value} value={member.value} key={key}/>)
        })
}

[sentry0]

Same issue with 2.13.4, only on iOS in my case, Android works fine.

[aminalali8]

Why is this closed I'm still facing the same issue here

[Flip32]

I'm using expo: 38, and native-base: 2.13.13
This problem still happening on IOS.
I tried all methods in this page unsuccessfuly

[nikhilarora18]

I was also getting the same error and the issue in my code was that I was rendering a Picker.Item conditionally and when the condition failed it was returning undefined, hence the error undefined is not an object.
So, make sure if you want conditional items, then make a array and return the array inside Picker without any undefined entry.

[cngodles]

Going to add this here. Not sure if this will answer it for anyone, but it seemed to work for some people.

• https://stackoverflow.com/a/64516751/1766536