Add items for dropdown in RNPickerSelect in React Native

Question

i am getting array of objects from api.

The data looks like this.

Array [
  Object {
    "code": 230,
    "name": "טרגט",
    "themeColor": "#009fe8",
  },
  Object {
    "code": 270,
    "name": "קוסל",
    "themeColor": "#9c3ab4",
  },
  Object {
    "code": 465,
    "name": "מעיין",
    "themeColor": "#0bb694",
  },
  Object {
    "code": 485,
    "name": "מעיין תיכונים",
    "themeColor": "#009fe8",
  },
  Object {
    "code": 700,
    "name": "משרד החינוך",
    "themeColor": "#9c3ab4",
  },
  Object {
    "code": 701,
    "name": "מ.החינוך אולפני",
    "themeColor": "#0bb694",
  },
  Object {
    "code": 702,
    "name": "חינוך התישבותי",
    "themeColor": "#009fe8",
  },
  Object {
    "code": 984,
    "name": "לא לגעת -חברת הדגמה ",
    "themeColor": "#9c3ab4",
  },
]

i want to add a dropdown which contain items as array of objects "name" value from api.

i am using RNPickerSelect from "react-native-picker-select";

const [selectedComp, setSelectedComp] = useState("");
  const changeLanguage = (value) => {
    setSelectedComp(value);
  };
<RNPickerSelect
            placeholder={{ label: i18n.t("SET_LANGUAGE") }}
            style={pickerSelectStyles}
            onValueChange={(value) => changeLanguage(value)}
            items={companyName}
            doneText={"בוצע"}
            value={selectedComp}
            useNativeAndroidPickerStyle={false}
            fixAndroidTouchableBug={true}
          />

i want the names for the dropdown list coming from array of object list like below one.

 טרגט
  קוסל
  מעיין
  מעיין תיכונים
  משרד החינוך
  מ.החינוך אולפני
  חינוך התישבותי
  לא לגעת -חברת הדגמה

How can i add name from array list for dropdown list?

score 0 · Answer 1 · answered Jan 19 '22 at 13:40

According to the official react-native-picker-select documentation, the data you want to display in the dropdown, should have the keyword label, but you are trying to display name keyword.

The items for the component to render

Each item should be in the following format: {label: 'Orange', value: 'orange', key: 'orange', color: 'orange', inputLabel: 'Orange!'}

label and value are required

Something like this:

<RNPickerSelect
      onValueChange={(value) => console.log(value)}
      useNativeAndroidPickerStyle={false}
      placeholder={{ label: "Select your favourite language", value: null }}
      items={[
          { label: "JavaScript", value: "JavaScript" },
          { label: "TypeStript", value: "TypeStript" },
          { label: "Python", value: "Python" },
          { label: "Java", value: "Java" },
          { label: "C++", value: "C++" },
          { label: "C", value: "C" },
      ]}
  />

i want the "name" value from array of objects in the items of RNPickerSelect. — Chinmayee Sahoo, Jan 19 '22 at 15:13
not keyword "name"...i want just value of "name" attribute from array of objects. — Chinmayee Sahoo, Jan 19 '22 at 15:14
According to the docs, RnPickerSelect won't be able to auto detect name, you need to change the keyword name to label like **{ { "code": 700, "label": "משרד החינוך", "value": "משרד החינוך", }}** — Akshay Shenoy, Jan 19 '22 at 15:19

Add items for dropdown in RNPickerSelect in React Native

1 Answers1