I have a Semantic UI React Multiselect Dropdown inside a React functional component and want to have buttons inside the menu, as such (still need to center them…)
How can I clear the selected values using the ‘Clear’ button? I am able to clear the selection using the ‘x’ icon, but that’s built into the component.
<Dropdown search multiple selection clearable closeOnSelectionChange={false} options={filterInitialSuggestions()} className='selectDropdown' header={dropdownButtons()} /> const dropdownButtons = () => { return ( <div> <Button positive size='mini'> Save </Button> <Button grey size='mini' onClick={() => console.log('I want to reset the multi select dropdown')}> Clear </Button> <Divider /> </div> ); };
Advertisement
Answer
‘Save’ and ‘Clear’ buttons with React useState()
. In Reactjs you don’t need to use DOM queryselector.
https://codesandbox.io/s/white-leftpad-q6re3?file=/src/Fun.jsx