Can't display values instead of labels in dropdown list

Issue

I am trying to display my values in my dropdown list but it shows me the labels. As you can see from the data it's designed as {label, value}. Everything looks normal I couldn't find the problem. I hope some of you can help.

If you want to check the Dropdown library: https://www.npmjs.com/package/react-native-element-dropdown

This is my data which comes with setDropdown(item.options):

Array [
  Object {
    "label": "319",
    "value": "Ahşap",
  },
  Object {
    "label": "320",
    "value": "Betonarme",
  },
  Object {
    "label": "321",
    "value": "Çelik ",
  },
  Object {
    "label": "322",
    "value": "Kütük",
  },
  Object {
    "label": "323",
    "value": "Prefabrik",
  },
]
Array [
  Object {
    "label": "332",
    "value": "Var",
  },
  Object {
    "label": "333",
    "value": "Yok",
  },
]... and goes on

App.js

const [selected, setSelected] = useState({});

        //it will arrange object(object) => array(object)
  function setDropdown(query) {
    const response = query;
    try {
      const array = Object.entries(response).map(([key, value]) => ({
        label: key,
        value: value,
      }));
      return array;
    } catch (error) {
      console.log(error);
    }
  }

function renderItems({ item }) {
let dropdownData = setDropdown(item.options);
    if (Object.keys(item.options).length > 0) {
      //console.log(item.name + " is dropdown");
      //console.log(dropdownData); I shared the data at the beginning of the post
      return (
        <View>
          <CustomDropdown
            text={item.name}
            data={dropdownData}
            value={selected}
            setValue={setSelected}
          />
        </View>
      );
    } else if (Object.keys(item.options).length == 0) {
      const keyboardType = item.numeric ? "numeric" : "default";
      //console.log(item.name + " is textinput");
      return (
        <View style={styles.inputContainer}>
          <TextInput
            style={styles.input}
            placeholder={item.name}
            keyboardType={keyboardType}
          />
        </View>
      );
    }
  }

CustomDropdown.js

function CustomDropdown({ text, data, value, setValue }) {
  const [isFocus, setIsFocus] = useState(false);

  return (
    <View>
      <View style={{ backgroundColor: "#fff", padding: 10, borderRadius: 15 }}>
        <Dropdown
          style={[styles.dropdown, isFocus && { borderColor: "blue" }]}
          placeholderStyle={styles.placeholderStyle}
          selectedTextStyle={styles.selectedTextStyle}
          inputSearchStyle={styles.inputSearchStyle}
          placeholder={!isFocus ? text : "..."}
          data={data}
          maxHeight={300}
          labelField="label"
          valueField="value"
          onFocus={() => setIsFocus(true)}
          onBlur={() => setIsFocus(false)}
          value={value}
          onChange={(item) => {
            setValue(item.value);
            setIsFocus(false);
          }}
        />
      </View>
    </View>
  );
}

Solution

You probably need to add label prop in your data objects. It probably looks for one and as it doesn't find it takes the value of the first prop in the object. You can do this by changing your data structure or mapping the data array when you pass it to the Dropdown like this:

data.map(option => {
  return {
    ...option,
    label: option.value
  }
})

Answered By - DimitarM