React Native Element Dropdown, Passing Dropdown selected value to parent component

Question

I'm attempting to pass the value selected from the child component dropdown picker to the parent component and store it into formik. but I cant seem to figure it out.

Github react-native-element-dropdown package used: https://www.npmjs.com/package/react-native-element-dropdown

Parent Component:

import React from "react";
import { Formik } from "formik";
import StyledPicker from "../Inputs/StyledPicker";

const Dashboard = () => {
  return (
        <View>
          <Formik
            initialValues={{     
              kgLb: "",
            }}
            onSubmit={(values, { setSubmitting }) => {
              if (values.kgLb == "") {
                setMessage("Please fill in fields to procced.");
                setSubmitting(false);
              } else {}
            }}
          >
            {({
              handleChange,
              handleBlur,
              handleSubmit,
              values,
              isSubmitting,
            }) => (
                    <StyledPicker
                      label="Enter Kg Or Lb:"
                      icon="fitness-center"              
                      keyboardType="default"
                      onChangeText={handleChange("kgLb")}
                      onBlur={handleBlur("kgLb")}
                      value={values.kgLb}
                    />
                )
            }

               {!isSubmitting && (
                  <RegularButton
                    style={{ marginBottom: 5 }}
                    onPress={handleSubmit}
                  >
                    {buttonText || `Complete`}
                  </RegularButton>
                )}
                {isSubmitting && (
                  <RegularButton style={{ marginBottom: 5 }}>
                    <ActivityIndicator size="small" color="primary" />
                  </RegularButton>
                )}
          </Formik>
        </View>
  );
};

export default Dashboard;

Child Component:

import React, { useState } from "react";
import { View } from "react-native";
import { Dropdown } from "react-native-element-dropdown";

const data = [
  { label: "KG", value: "KG" },
  { label: "LB", value: "LB" },
];

const StyledPicker = ({ ...props }) => {
  const [value, setValue] = useState(null);
  const [isFocus, setIsFocus] = useState(false);
  console.log(value);

  return (
    <View>
      {/* Picker/Dropdown isn't submiting the value to the parent component */}
          <Dropdown
            {...props}
            placeholderStyle={styles.placeholderStyle}
            selectedTextStyle={styles.selectedTextStyle}
            inputSearchStyle={styles.inputSearchStyle}
            data={data}
            search
            maxHeight={300}
            labelField="label"
            valueField="value"
            placeholder={!isFocus ? "Example: Kg - Lb" : "..."}
            searchPlaceholder="Search..."
            value={value}
            onFocus={() => setIsFocus(true)}
            onBlur={() => setIsFocus(false)}
            onChange={(item) => {
              setValue(item.value);
              setIsFocus(false);
            }}
          />
      )}
    </View>
  );
};

export default StyledPicker;

score 0 · Accepted Answer · answered Oct 02 '22 at 18:07

0

Make style picker receive an onChange function in the props!

In the child:

onChange={(item) => {
   setValue(item.value);
   setIsFocus(false);
   props.onChange(item)
}}

in the parent:

// set a use state with the dropdown value
const [dropdownValue, setDropdownValue] = useState()

    //...
    <
    Formik
initialValues = {
    {
        kgLb: "",
    }
}
onSubmit = {
        (values, {
            setSubmitting
        }) => {
            if (values.kgLb == "") {
                setMessage("Please fill in fields to procced.");
                // here you can do something with dropdown value
                setSubmitting(false);
            } else {}
        }
    } >

    //...

    <
    StyledPicker
label = "Enter Kg Or Lb:"
icon = "fitness-center"
keyboardType = "default"
onChangeText = {
    handleChange("kgLb")
}
onBlur = {
    handleBlur("kgLb")
}
value = {
    values.kgLb
}
onChange = {
    setDropdownValue
}
/>

answered Oct 02 '22 at 18:07

Lautaro urtiaga

142
7

Thanks the value is now stored within the useState in my parent component. But formik isn't registering the value, How would I go about putting the useState value into value = { values.kgLb} – james hoy Oct 03 '22 at 12:02
I've put the useState value within the formik initialValues={{ kgLb: dropdownValue.value }} but if I console.log(values.KgLb) it will give me back undefined value Object { "kgLb": undefined } – james hoy Oct 03 '22 at 12:27
That is because initial values doesn't change after the first time initializing the component. See that formik has a prop called "setValues" perhaps that code = {{ kgLb: dropdownValue.value }} belongs there – Lautaro urtiaga Oct 03 '22 at 12:33
See this post: https://stackoverflow.com/questions/70078332/how-to-set-all-formik-values-at-once he sets the values every time address changes. You would need to do the same but with dropdown value. – Lautaro urtiaga Oct 03 '22 at 12:37

React Native Element Dropdown, Passing Dropdown selected value to parent component

1 Answers1

Make style picker receive an onChange function in the props!