Topic: Cannot set MDBSelect controlled component value to an empty string
Expected behavior
- Update MDBSelect's value to an empty string via useState hook
- The select option with the value of an empty string should be selected.
Actual behavior
The selected option does not change.
Resources (screenshots, code snippets etc.)
This sample code is adapted slightly from https://mdbootstrap.com/docs/react/forms/select/#subsection-single-selection to include an option with an empty string as a value.
It behaves as expected if the value -1 (or any other value besides an empty string) is used for the "Select One" value.
export default function App() {
const [selectValue, setSelectValue] = useState(4);
const [selectData, setSelectData] = useState([
{ text: 'Select One', value: "" },
{ text: 'One', value: 1 },
{ text: 'Two', value: 2 },
{ text: 'Three', value: 3 },
{ text: 'Four', value: 4 },
{ text: 'Five', value: 5 },
]);
return (
<>
<MDBSelect
data={selectData}
label="Example label"
value={selectValue}
onChange={(e) => {
setSelectValue(e.value);
}}
/>
<MDBBtn color="link" type="button" onClick={() => setSelectValue("")}>
Reset
</MDBBtn>
</>
);
}
Mateusz Lazaru staff answered 3 weeks ago
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: Yes
- Technology: MDB React
- MDB Version: MDB5 9.0.0
- Device: Macbook Pro
- Browser: Chrome
- OS: OSx
- Provided sample code: No
- Provided link: Yes