I am creating a simple component with Picker but when i try to use <Picker.Item /> which is mentioned in the document of the original website i get the error:
Picker component is also used in the code but compiler had no issues with it.
can not read property ‘item’ of undefined
here is the code:
import React, { useState } from "react";
import { StyleSheet, View } from "react-native";
import { Picker } from "native-base";
import { TextInput } from "react-native-paper";
export default function AddScreen() {
const [name, setName] = useState(undefined);
const [data, setData] = useState(undefined);
const [type, setType] = useState(undefined);
const onTypeChanged = (value) => {
setType(value)
}
return (
<View style={styles.container}>
<TextInput
label="Name"
value={name}
onChangeText={(text) => {
setName(text);
}}
/>
<TextInput
label="Data"
value={data}
onChangeText={(text) => {
setData(data);
}}
style={{
marginTop: 20,
}}
/>
<Picker
mode="dropdown"
style={{ width: 120 }}
selectedValue={null}
onValueChange={onTypeChanged.bind(this)}
placeholder = "Select Data Type"
>
{/* can not read property 'item' of undefined */}
<Picker.Item label="Links" value="links" />
<Picker.Item label="Location" value="location" />
<Picker.Item label="Phone" value="phone" />
<Picker.Item label="Website" value="website" />
<Picker.Item label="Email" value="email" />
</Picker>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
padding: 20,
},
});
2
Answers
i simply had to import:
instead of:
Try the following changes: