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.
3
Answers
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.
Try it out, it worked in my case.
Check the below code it’s working fine please check the below logs SS:
hope this will help you