I built a cutom model picker in react native. But when I select an item in the list it is not showing the selected value.

custom picker code

function ItemPicker({
  icon,
  items,
  onSelectItem,
  placeholder,
  selectedItem,
  label,
}) {
  const [modalVisible, setModalVisible] = useState(false);

  return (
    <>
      <TouchableWithoutFeedback onPress={() => setModalVisible(true)}>
        <View style={styles.container}>
          {icon && (
            <MaterialCommunityIcons
              name={icon}
              size={20}
              color={colors.medium}
              style={styles.icon}
            />
          )}
          <Text style={styles.text}>
            {selectedItem ? selectedItem.label : placeholder}
          </Text>
          <MaterialCommunityIcons
            name="chevron-down"
            size={20}
            color={colors.gray}
          />
        </View>
      </TouchableWithoutFeedback>

      <Modal visible={modalVisible} animationType="fade">
        <View>
          <Button title="Close" onPress={() => setModalVisible(false)} />
          <FlatList
            data={items}
            keyExtractor={(item) => item.value.toString()}
            persistentScrollbar
            renderItem={({ item }) => (
              <TouchableOpacity
                label={item.label}
                onPress={() => {
                  setModalVisible(false);
                  // onSelectItem(item);
                }}
              >
                <Text style={styles.pickertext}>{item.label}</Text>
              </TouchableOpacity>
            )}
          />
        </View>
      </Modal>
    </>
  );
}

Item list and picker

const months = [
  { label: "January", value: 1 },
  { label: "Feburary", value: 2 },
  { label: "March", value: 3 },
  { label: "April", value: 4 },
  { label: "May", value: 5 },
  { label: "June", value: 6 },
  { label: "July", value: 7 },
  { label: "August", value: 8 },
  { label: "September", value: 9 },
  { label: "October", value: 10 },
  { label: "November", value: 11 },
  { label: "December", value: 12 },
];     

<ItemPicker
                selectedItem={month}
                value={month}
                months={months}
                onSelectItem={(item) => setMonth(item.value)}
                items={months}
                icon="calendar-month"
                placeholder="Choose Month"
              />

Here when I change the item picker's property onSelectItem={(item) => setMonth(item.value)} to onSelectItem={(item) => setMonth(item)} it's showing the selected item but the value doesn't submit.

output when onSelectItem={(item) => setMonth(item.value)}

output when onSelectItem={(item) => setMonth(item)}

How can I fix this?

CodePudding user response：

Your problem is that ItemPicker is expecting selectedItem to be an object rather than a number. If you want month to be a number, then you have to change selectedItem to

<ItemPicker
  selectedItem={months[month-1]}
  value={month}
  months={months}
  onSelectItem={(item) => setMonth(item.value)}
  items={months}
  icon="calendar-month"
  placeholder="Choose Month"
/>

If you are fine with month being an object rather than a number:

<ItemPicker
  selectedItem={month}
  value={month}
  months={months}
  onSelectItem={setMonth}
  items={months}
  icon="calendar-month"
  placeholder="Choose Month"
/>

It may also be better in ItemPicker to change

<Text style={styles.text}>
  {selectedItem ? selectedItem.label : placeholder}
</Text>

to

 <Text style={styles.text}>
   {selectedItem?.label || placeholder}
</Text>