Dropdown values not showing in React.js

Question

I am working on a geocalculator and I've run into an issue regarding the dropdown menus to select the conversions from miles to kilometers or vice-versa. The same goes for degrees to mils. Whenever I try to use the menus, they do nothing. I'm not sure how I'm supposed to be declaring text. I was told it should look like this in my dropdown:

        <Padder>
            <Dropdown
            label = 'Distance Type'
            value = {distPick}
            onChangeText = {(text) => setDistPick(distPick)}
            />
            <Dropdown
            label = 'Navigational Type'
            value = {bearingPick}
            onChangeText = {(text) => setBearingPick(bearingPick)}
            /> 
      </Padder>

And this is what I currently have for the entire file:

import React, { useState, useEffect } from "react";
import { StyleSheet, Text, Keyboard, View } from "react-native";
import { Input, Button } from "react-native-elements";
import Padder from "../components/Padder";
import { Dropdown } from "react-native-material-dropdown";
import { TouchableOpacity } from "react-native-gesture-handler";
import { Feather } from '@expo/vector-icons';

const Settings = ({ navigation, route }) => {


    const [distPick, setDistPick] = useState({distPick: ['Kilometers', 'Miles']});
    const [bearingPick, setBearingPick] = useState({bearingPick: ['Degrees', 'Mils']});


    navigation.setOptions({
        headerLeft: () => (
            <TouchableOpacity onPress = {() => navigation.navigate('CalculatorScreen')}>
                <Feather style={{ marginRight: 10 }} name="trash" size={24} />
                </TouchableOpacity>

        ),
        headerRight: () => (
            <TouchableOpacity onPress={() => {
                navigation.navigate('CalculatorScreen', {distPick, bearingPick});
            }}>
                <Feather style={{ marginRight: 10 }} name="save" size={24} />
            </TouchableOpacity>
        ),
    });

    return(
        <Padder>
            <Dropdown
            label = 'Distance Type'
            value = {distPick}
            onChangeText = {(text) => setDistPick(text)}
            />
            <Dropdown
            label = 'Navigational Type'
            value = {bearingPick}
            onChangeText = {(text) => setBearingPick(text)}
            /> 
      </Padder>
    );
}

const styles = StyleSheet.create({
    header: {
        textAlign: 'center',
        backgroundColor: "#0098c7",
        color: 'white',
        fontSize: 25
    },
});

export default Settings;

I know there are a lot of unnecessary imports at the top at the moment, but that is for another reason. If you have any suggestions I would greatly appreciate them.

PS - If you have any idea why my save and cancel navigational buttons are not working advice would be appreciated as well.

Answer 1

This seems to be happening because you are not the assigning dropdowns data

Aside of this:

const [distPick, setDistPick] = useState({distPick: ['Kilometers', 'Miles']});
const [bearingPick, setBearingPick] = useState({bearingPick: ['Degrees', 'Mils']});

Add this:

const [distPickData, setDistPickData] = useState(['Kilometers', 'Miles']);
const [bearingPickData, setBearingPickData] = useState(['Degrees', 'Mils']);

Then set the data of the dropdowns as

<Dropdown
        label = 'Distance Type'
        value = {distPick}
        onChangeText = {(text) => setDistPick(text)}
        data={distPickData}
        />...

And set the selected values into another variables instead of the same ones.

Regards.

Answer 2

Here is the updated final code to the working program. One addition that I didn't have initially and was added pass parameters to a different screen. The data eventually needed to be put into an array and looked like the following.

    const initialDistPick = route.params.distPick;
    const initialBearingPick = route.params.bearingPick;
    const [distPick, setDistPick] = useState(initialDistPick);
    const [bearingPick, setBearingPick] = useState(initialBearingPick);
    const dUnits = [
        {value: 'Miles',},
        {value: 'Kilometers',},];
    const bUnits = [
        {value: 'Degrees',},
        {value: 'Mils',},];

    return(
        <Padder>
            <Dropdown
            label = 'Distance Type'
            value = {distPick}
            data = {dUnits}
            onChangeText = {(text) => setDistPick(text)}

            />
            <Dropdown
            label = 'Navigational Type'
            value = {bearingPick}
            data = {bUnits}
            onChangeText = {(text) => setBearingPick(text)}

            /> 
      </Padder>
    );
}