skip to Main Content

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


  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.

    Login or Signup to reply.
  2. Check the below code it’s working fine please check the below logs SS:
    enter image description here

    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',
      },
    });
    
    Login or Signup to reply.
  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,
      },
    })
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search