Solution for clearing selected item in dropdown.

[DrPolymath]

Hello, I really need help in this matter. In my project, I have created 2 dropdown. The option list of the second dropdown is based on what user selected in the first dropdown. So supposedly, the selected item in the second dropdown should be cleared every time the selected item in the first dropdown change. How should I do that? I have tried this approach but it doesnt work.

const [showDropDown1, setShowDropDown1] = useState(false); const [showDropDown2, setShowDropDown2] = useState(false);

const [rI, setrI] = useState('')
const [lI, setlI] = useState('')

const remoteItems = [
    {id: 1, label: 'Item 1', value: 'item-1'},
    {id: 2, label: 'Item 2', value: 'item-2'},
];
const lItems = [
    {id: 1, label: 'L 1', value: 'l-1'},
    {id: 2, label: 'L 2', value: 'l-2'},
];

const handleSetrI = (rI) => {
    setlI('')
    setrI(rI);
}

return ( <View> <DropDown visible={false} label={'Car Brand'} mode={'outlined'} visible={showDropDown1} showDropDown={() => setShowDropDown1(true)} onDismiss={() => setShowDropDown1(false)} value={rI} setValue={(val) => handleSetrI(val)} list={remoteItems} /> <DropDown visible={false} label={'Car Model'} mode={'outlined'} visible={showDropDown2} showDropDown={() => setShowDropDown2(true)} onDismiss={() => setShowDropDown2(false)} value={lI} setValue={setlI} list={lItems} /> </View> )

[murilolima]

Edit the file DropDown.js and modify Line 29 to

} else {
  setDisplayValue('');
}

[DrPolymath]

Thank you!

[Venkat1P]

Thanks @murilolima Above solution worked well. Do you have any plan to add this to next release.

[bombillazo]

Please add a way to clear the input value. I know you're working on a new version of this package but there are various improvements that could be made while we wait, this being one of them!

[Venkat1P]

Thanks @fateh999