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;

Answer 1

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
}
/>