Remove selected item and see the placeholder

[AmirHMousavi]

How can I remove the selected item to see the placeholder? Initially, I can see the placeholder, but after selecting an item there is no way to remove it. I can set the state to undefined but that does not affect the dropdown showing the selected item.

         import { SelectList } from 'react-native-dropdown-select-list';

         const [selectedItem,setSelectedItem]=useState<string|undefined>(undefined);

          <SelectList
            setSelected={(key: string) => setSelectedItem(key)}
            data={items.map((i) => ({ key: I,id, value: i.name }))}
            save='key'
            searchPlaceholder='Search items...'
            placeholder='Select an item'
            searchicon={<Icon name='magnify' size={25} />}
          />
         <Icon name='delete' size={25}  onPress={()=>setSelectedItem(undefined)}/>

I am using "react-native-dropdown-select-list": "^2.0.5"

It is not a fully controlled component. So what would be the mechanism for removing the selected item?

[armansheikh]

This is not mentioned in the documentation. However you can reset by using the "defaultOption" just set it to {key: '', value: ''} don't set null value and it works like a charm.

[ITyukz11]

const [resetKey, setResetKey] = useState(0);

  const clearSelection = () => {
        setSelectedItem([]);
        setResetKey(resetKey + 1); // Change the reset key to force re-render
      };

     <MultipleSelectList
                   key={resetKey} //add this 
                   defaultOption={{key: '', value: ''}} //add this 

and for your button => onPress={clearSelection}