Map object to generate Picker.Item instances in React Native triggers a “TypeError: undefined is not an object”

My code is based off of this Stack Overflow question: React Native apply array values from state as Picker items

I used Manjeet Singh's first solution (for mapping an Object to Picker.Item instances) since I'm storing my data in an Object.

However, when I use his method, I'm getting a "TypeError: undefined is not an object (evaluating 'child.props.value')" error.

My code looks like:

class View extends React.Component{
state = { exercise: '' };
arrItems = {"Badminton":"7", "Basketball":"9.3", "Biking":"8"};
render(){
<Picker selectedValue={this.state.exercise}
onValueChange={(itemValue, itemIndex)=>this.setState({ exercise: itemValue })>
{Object.keys(this.arrItems).map((key) => {
return (<Picker.Item label={key} value={key} key={key}/>)
})}
}
</Picker>
}


I'm pretty new to React Native -- what is the issue causing this error?

1 Answer
1

some small tips:

{ return(statement) }

(statement)

.map((item, index) =>

Try this:

class View extends React.Component {
constructor() {
super();

this.state = {
exercise: '',
arrItems: { "Badminton": "7", "Basketball": "9.3", "Biking": "8" }
}
}

render() {
return (
<Picker selectedValue={this.state.exercise}
onValueChange={(itemValue, itemIndex) => this.setState({ exercise: itemValue })}>
{Object.keys(this.state.arrItems).map((key, index) =>
<Picker.Item label={key} value={key} key={index} />
)}
</Picker>
)
}
}


Also you might want to rename your Class to something different than View, as you will probably use the built in View a lot (can only have one).

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.