Topic: MDB5, formik & MDSelect : Cannot get value
I'm using formik for my form, it works perfectly with MDBInput, like this :
MDBInput id="title"
placeholder="Hamburger Foundation" type="text" onChange={handleChange} onBlur={handleBlur} value={values.title} className={ errors.title && touched.title ? "is-invalid" : "" }
/>
But when I try to add a MDBSelect, like in your doc :
MDBSelect data={[ { text: 'Burger' }, { text: 'Pizza' }, ]} placeholder='Burger' onChange={handleChange} onBlur={handleBlur} value={values.categorie} className={ errors.categorie && touched.categorie ? "is-invalid" : "" }
/>
I cannot get the value change...
I got it to work with setFieldValue() method from formik - let me know if there is a better way :D
import { MDBSelect } from "mdb-react-ui-kit";
import { useFormikContext } from "formik";
function Select() {
const { setFieldValue } = useFormikContext();
const handleSelection = (submission) => {
console.log("lunchOption", ">>", submission);
setFieldValue("lunchOption", submission);
};
return (
<MDBSelect
data={[ { text: 'Burger' }, { text: 'Pizza' } ]}
label="Pick a lunch"
name="lunchOption"
getSelectedValue={(data) => {
handleSelection(data);
}}
/>
);
}
export default Select;
Wojciech Staniszewski staff commented 2 years ago
This might be the possible resolution. For now, nothing has changed in MDBSelect and the value still needs to be read with getSelectedValue and/or getData methods.
Hi!
Due to the complicated structure of the MDBSelect component, you have to use the getSelectedValue and/or getData methods to get values from it. You can check them in our API section: https://mdbootstrap.com/docs/b5/react/forms/select/#api-section-methods :)
Keep coding!
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Priority
- Premium support: Yes
- Technology: MDB React
- MDB Version: MDB5 1.0.0-beta5
- Device: PC
- Browser: Chrome
- OS: Windows
- Provided sample code: No
- Provided link: No