Can't display values instead of labels in dropdown list-CodePudding

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.

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({});

function renderItems({ item }) {
    if (Object.keys(item.options).length > 0) {
      //console.log(item.name   " is dropdown");
      //console.log(setDropdown(item.options); I shared the data at the beginning of the post
      return (
        <View>
          <CustomDropdown
            text={item.name}
            data={setDropdown(item.options)}
            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="key"
          valueField="value"
          onFocus={() => setIsFocus(true)}
          onBlur={() => setIsFocus(false)}
          value={value}
          onChange={(item) => {
            setValue(item.value);
            setIsFocus(false);
          }}
        />
      </View>
    </View>
  );
}

CodePudding user response：

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

CodePudding user response：

It was all about changing the

labelField="label"
valueField="value"

labelField="value"
valueField="label"

It feels like a bad implementation but looks like this is what I have to do if I stick with the documentation of "dropdown".

I checked the terminal, the selection also gives the value. So it looks like it meets my needs. If you have a better way please share your solutions. Thanks to everyone who joins to the discussion.