react-native-element-dropdown returns undefined, onchange not working in the second dropdown - react-native

Question

I have two dropdowns from react native element dropdown, the first one works fine and when i choose the restaurant option i display a second dropdwon, but this one the onChange always returns undefined.
Here is my code
export function EcoForm(props) {
const { formik } = props;
const [isEnabled, setIsEnabled] = useState(false);
const toggleSwitch = () => {
setIsEnabled((previousState) => !previousState);
formik.setFieldValue("eco", isEnabled);
};
const dataBusinessType = [
{ label: "Restaurant", value: "restaurant" },
{ label: "Shop", value: "shop" },
{ label: "Acomodation", value: "acomodation" },
];
const dataRestaurantType = [
{ label: "RestaurantTYpe", value: "restaurantType" },
{ label: "Cofee/Bakery", value: "cofee/Bakery" },
];
const [value, setValue] = useState(null);
const [valueRestaurantType, setValueRestaurantType] = useState(null);
// console.log(isEnabled);
return (
<View style={styles.content}>
<Text style={styles.text}>Is the business Ecofriendly?</Text>
<Dropdown
style={styles.dropdown}
placeholderStyle={styles.placeholderStyle}
selectedTextStyle={styles.selectedTextStyle}
inputSearchStyle={styles.inputSearchStyle}
iconStyle={styles.iconStyle}
data={dataBusinessType}
search
maxHeight={300}
labelField="label"
valueField="value"
placeholder="Select business type"
searchPlaceholder="Search..."
value={value}
onChange={(item) => {
setValue(item.value);
formik.setFieldValue("businessType", value);
}}
renderLeftIcon={() => (
<AntDesign
style={styles.icon}
color="black"
name="Safety"
size={20}
/>
)}
/>
{value === "restaurant" ? (
<>
<Dropdown
style={styles.dropdown}
placeholderStyle={styles.placeholderStyle}
selectedTextStyle={styles.selectedTextStyle}
inputSearchStyle={styles.inputSearchStyle}
iconStyle={styles.iconStyle}
data={dataRestaurantType}
search
maxHeight={300}
labelField="label"
valueField="value"
placeholder="Select restaurant type"
searchPlaceholder="Search..."
value={valueRestaurantType}
onChange={(item) => {
setValueRestaurantType(item.valueRestaurantType);
formik.setFieldValue("restauranType", valueRestaurantType);
console.log("a ver ", valueRestaurantType);
}}
renderLeftIcon={() => (
<AntDesign
style={styles.icon}
color="black"
name="Safety"
size={20}
/>
)}
/>
<CheckBox
title="Eco friendly"
checked={isEnabled}
onPress={() => toggleSwitch()}
/>
<CheckBox
title="Vegan"
checked={isEnabled}
onPress={() => toggleSwitch()}
/>
</>
) : null}
</View>
);
}
I have also tried creating a component with the second dropdown and import it but the behaviour is exactly the same.
Not sure what i am missing.

Answer 1

As I can see, the Dropdown Component in react doesn't have any parameter named as Data.
Try to change Data with options like this.
<Dropdown
style={styles.dropdown}
placeholderStyle={styles.placeholderStyle}
selectedTextStyle={styles.selectedTextStyle}
inputSearchStyle={styles.inputSearchStyle}
iconStyle={styles.iconStyle}
options={dataRestaurantType}
search
maxHeight={300}
labelField="label"
valueField="value"
placeholder="Select restaurant type"
searchPlaceholder="Search..."
value={valueRestaurantType}
onChange={(item) => {
setValueRestaurantType(item.valueRestaurantType);
formik.setFieldValue("restauranType", valueRestaurantType);
console.log("a ver ", valueRestaurantType);
}}
renderLeftIcon={() => (
<AntDesign
style={styles.icon}
color="black"
name="Safety"
size={20}
/>
)}
/>
Try it out, it worked in my case.

Answer 2

Check the below code it's working fine please check the below logs SS:
import React, { memo, useEffect, useRef, useState } from 'react';
import { Text, View, StyleSheet,CheckBox } from 'react-native';
import Constants from 'expo-constants';
import { Dropdown } from 'react-native-element-dropdown';
import AntDesign from 'react-native-vector-icons/AntDesign';
// You can import from local files
import AssetExample from './components/AssetExample';
// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';
export default function App(props) {
const { formik } = props;
const [isEnabled, setIsEnabled] = useState(false);
const toggleSwitch = () => {
setIsEnabled((previousState) => !previousState);
formik.setFieldValue("eco", isEnabled);
};
const dataBusinessType = [
{ label: "Restaurant", value: "restaurant" },
{ label: "Shop", value: "shop" },
{ label: "Acomodation", value: "acomodation" },
];
const dataRestaurantType = [
{ label: "RestaurantTYpe", value: "restaurantType" },
{ label: "Cofee/Bakery", value: "cofee/Bakery" },
];
const [value, setValue] = useState(null);
const [valueRestaurantType, setValueRestaurantType] = useState(null);
// console.log(isEnabled);
return (
<View style={styles.content}>
<Text style={styles.text}>Is the business Ecofriendly?</Text>
<Dropdown
style={styles.dropdown}
placeholderStyle={styles.placeholderStyle}
selectedTextStyle={styles.selectedTextStyle}
inputSearchStyle={styles.inputSearchStyle}
iconStyle={styles.iconStyle}
data={dataBusinessType}
search
maxHeight={300}
labelField="label"
valueField="value"
placeholder="Select business type"
searchPlaceholder="Search..."
value={value}
onChange={(item) => {
console.log("item==>",item)
setValue(item.value);
formik.setFieldValue("businessType", value);
}}
renderLeftIcon={() => (
<AntDesign
style={styles.icon}
color="black"
name="Safety"
size={20}
/>
)}
/>
{value === "restaurant" ? (
<>
<Dropdown
style={styles.dropdown}
placeholderStyle={styles.placeholderStyle}
selectedTextStyle={styles.selectedTextStyle}
inputSearchStyle={styles.inputSearchStyle}
iconStyle={styles.iconStyle}
data={dataRestaurantType}
search
maxHeight={300}
labelField="label"
valueField="value"
placeholder="Select restaurant type"
searchPlaceholder="Search..."
value={valueRestaurantType}
onChange={(item) => {
console.log("a ver ", item);
setValueRestaurantType(item.valueRestaurantType);
formik.setFieldValue("restauranType", item.valueRestaurantType);
}}
renderLeftIcon={() => (
<AntDesign
style={styles.icon}
color="black"
name="Safety"
size={20}
/>
)}
/>
<CheckBox
title="Eco friendly"
checked={isEnabled}
onPress={() => toggleSwitch()}
/>
<CheckBox
title="Vegan"
checked={isEnabled}
onPress={() => toggleSwitch()}
/>
</>
) : null}
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
padding: 8,
},
paragraph: {
margin: 24,
fontSize: 18,
fontWeight: 'bold',
textAlign: 'center',
},
});

Answer 3

hope this will help you
const App=()=>{
retutn(
<Dropdown
style={[style.dropdown1, isFocus && { borderColor: 'blue' }]}
selectedTextStyle={style.selectedTextStyle1}
data={data}
maxHeight={300}
labelField="label"
valueField="value"
placeholder={!isFocus ? 'Personal' : ''}
onFocus={() => setIsFocus(true)}
onBlur={() => setIsFocus(false)}
onChange={item => {
setValue(item.label);
setIsFocus(false);
}}
/>
)
}
const styel=styleSheet.create({
dropdown1: {
height: 50,
width: 350,
marginLeft: 15,
borderColor: 'gray',
//borderWidth: 0.5,
borderRadius: 8,
paddingHorizontal: 8,
},
selectedTextStyle1: {
fontSize: 16,
},
})