React Native picker selected value keeps a deleted item

Question

On a screen I delete an object based on a value, and when the item gets deleted and I want to select a new one, the 'selectedValue' prop keeps the value of the item that whas deleted, thus triggering an error.

Let's say I have this list:

[{ profit: '2300', month: 'February', year: '2021' },
{ profit: '2600', month: 'January', year: '2021' },
{ profit: '3100', month: 'March', year: '2021' },
{ profit: '1900', month: 'January', year: '2020' },
{ profit: '2400', month: 'April', year: '2021' }]

And on one of the Picker components I display the months of the year that was selected. For example, if I choose the year 2021 the month array should be ['January', 'February', 'March', 'April'] . Then, I delete the values for February . The values get deleted and the array for 2021 changes to ['January', 'March', 'April'] . However, on the Picker 'currentItem', the value is set to February , no matter if the value is not on the ItemList anymore.

Here's my code of the screen where the Picker is:

<ItemPicker
   visible={monthModalVisible} // <- The item picker is a Modal, thus it's not visible until the press of a button
   itemList={userMonths} // <- The array with the months of the selected year
   defaultItem={userMonths[0]}
   onSelectItem={m => {
     setMonthModalVisible(false);
     saveInState({ month: m });
     toggleProfit(m); // <- Function that retrieves the object on the list based on the selected month
     setMonthSelected(m);
   }}
 />

And this is my code for the ItemPicker component:

import { Picker } from '@react-native-community/picker';

export default function CustomDatePicker(props) {
  const {
    visible,
    itemList,
    defaultItem,
    btnText,
    onSelectItem
  } = props;
  const [currentItem, setCurrentItem] = useState(defaultItem);
  const { shadow, flexCenter, modal, button, picker } = styles;

  useEffect(() => {
    setCurrentItem(defaultItem);
  }, [defaultItem]);

  return (
    <Modal
      animationType="slide"
      transparent
      visible={visible}
    >
      <View style={flexCenter}>
        <View style={[shadow, modal]}>
          <Picker
            selectedValue={currentItem}
            onValueChange={value => setCurrentItem(value)}
            style={picker}
          >
            {itemList.map(item => (
              <Picker.Item value={item} label={item} key={item} />
            ))}
          </Picker>
          <Button
            text={btnText}
            style={button}
            onPress={() => { setCurrentItem(currentItem); onSelectItem(currentItem); }}
          />
        </View>
      </View>
    </Modal>
  );
}

What I want to do is make the Picker component "forget" the value that was selected (and deleted, ie If I choose February and it's object gets deleted, then February shouldn't be the Picker's currentItem anymore)

Answer 1

The useEffect hook is not working.

  useEffect(() => {
    setCurrentItem(defaultItem);
  }, [defaultItem]);

Just use this

import { Picker } from '@react-native-community/picker';

export default function CustomDatePicker(props) {
  const {
    visible,
    itemList,
    defaultItem,
    btnText,
    onSelectItem
  } = props;
  const [currentItem, setCurrentItem] = useState(null);
  const { shadow, flexCenter, modal, button, picker } = styles;


  return (
    <Modal
      animationType="slide"
      transparent
      visible={visible}
    >
      <View style={flexCenter}>
        <View style={[shadow, modal]}>
          <Picker
            selectedValue={currentItem || defaultItem}
            onValueChange={value => setCurrentItem(value)}
            style={picker}
          >
            {itemList.map(item => (
              <Picker.Item value={item} label={item} key={item} />
            ))}
          </Picker>
          <Button
            text={btnText}
            style={button}
            onPress={() => { setCurrentItem(null); onSelectItem(currentItem || defaultItem); }}
          />
        </View>
      </View>
    </Modal>
  );
}