Topic: How to use MDBSelect with Formik
Expected behavior
I want to use MDBSelect with Formik.
Actual behavior
But I can not find onChange event from MDBSelect.
Resources (screenshots, code snippets etc.)
This is my code snippet
<Formik
initialValues={initialValues}
validate={validateForm}
onSubmit={handleSubmit}
>
{({values, touched, errors, handleChange, handleBlur, handleSubmit, isSubmitting}) => (
<form onSubmit={handleSubmit}>
<div className="white-text">
...
<MDBRow>
<MDBCol md="6">
<MDBSelect label={t('AUTH.COUNTRY_CODE')} className="mt-3 mb-0 white" selected={[countryCode]} onChange={handleChange} >
<MDBSelectInput/>
<MDBSelectOptions>
<MDBSelectOption value={COUNTRY_CODE.BAHRAIN} >{COUNTRY_CODE.BAHRAIN} - {t("COMMON.GCC_COUNTRIES.BAHRAIN")}</MDBSelectOption>
<MDBSelectOption value={COUNTRY_CODE.KUWAIT} >{COUNTRY_CODE.KUWAIT} - {t("COMMON.GCC_COUNTRIES.KUWAIT")}</MDBSelectOption>
<MDBSelectOption value={COUNTRY_CODE.OMAN} >{COUNTRY_CODE.OMAN} - {t("COMMON.GCC_COUNTRIES.OMAN")}</MDBSelectOption>
<MDBSelectOption value={COUNTRY_CODE.QATAR} >{COUNTRY_CODE.QATAR} - {t("COMMON.GCC_COUNTRIES.QATAR")}</MDBSelectOption>
<MDBSelectOption value={COUNTRY_CODE.SAUDI_ARABIA} >{COUNTRY_CODE.SAUDI_ARABIA} - {t("COMMON.GCC_COUNTRIES.SAUDI_ARABIA")}</MDBSelectOption>
<MDBSelectOption value={COUNTRY_CODE.UAE} >{COUNTRY_CODE.UAE} - {t("COMMON.GCC_COUNTRIES.UAE")}</MDBSelectOption>
</MDBSelectOptions>
</MDBSelect>
{errors.countryCode === VALIDATION.REQUIRED && <div className="text-left invalid-field2">{t("COMMON.VALIDATION.REQUIRED", {field: t("AUTH.COUNTRY_CODE")})}</div>}
</MDBCol>
<MDBCol md="6">
<MDBInput id="phone" name="phone" type="text" label={t("AUTH.PHONE")} background containerClass="mt-3 mb-0" value={values.phone} onChange={handleChange} onBlur={handleBlur}>
{!!touched.phone && errors.phone === VALIDATION.REQUIRED && <div className="text-left invalid-field2">{t("COMMON.VALIDATION.REQUIRED", {field: t("AUTH.PHONE")})}</div>}
{!!touched.phone && errors.phone === VALIDATION.INVALID && <div className="text-left invalid-field2">{t("COMMON.VALIDATION.INVALID", {field: t("AUTH.PHONE")})}</div>}
</MDBInput>
</MDBCol>
</MDBRow>
...
</div>
<div className="text-center mt-4 mb-3 mx-5">
<MDBBtn type="submit" color="white" rounded className="full-width z-depth-1a blue-grey-text" disabled={!!loading || !!isSubmitting || (!!errors && !!Object.keys(errors).length)}>
{!isSubmitting && <MDBIcon size="lg" icon={"user-plus"} />}
{!!isSubmitting && <div className="spinner-grow spinner-grow-sm" role="status"/>}
{!isSubmitting && t("AUTH.SIGN_UP")}
</MDBBtn>
</div>
</form>
)
}
</Formik>
I mean getvalue with something like that
import React, { Component } from 'react';
import { MDBSelect, MDBContainer, MDBRow, MDBCol } from 'mdbreact';
class Test extends React.Component {
state = {
basicOptions: []
};
componentDidMount() {
this.setState({
basicOptions: this.createOptions()
});
}
createOptions = () => [
{
checked: false,
disabled: false,
text: 'Option One',
value: '1'
},
{
checked: false,
disabled: false,
text: 'Option Two',
value: '2'
},
{
checked: false,
disabled: false,
text: 'Option Three',
value: '3'
},
{
checked: false,
disabled: false,
text: 'Option Four',
value: '4'
}
];
getValueOfSelect = value => {
console.log(value);
};
render() {
const { basicOptions } = this.state;
return (
<MDBContainer>
<MDBRow className='d-flex justify-content-center'>
<MDBCol md='6'>
<MDBSelect
color='primary'
getValue={this.getValueOfSelect}
getTextContent={this.getValueOfSelect}
options={basicOptions}
label='Basic example'
/>
</MDBCol>
</MDBRow>
</MDBContainer>
);
}
}
export default Test;
Are you able to provide a working example of integrating MDBSelect and Formik? I've tried using getValue from MDBSelect together with SetValue in Formik Field but can't make it work.
const ProductMaterials = (props: Props) => {
const [field, meta, {setValue}] = useField(props.name)
const options = props.materials.map((material) => ({
text: ${material.brand} - ${material.name},
value: material.contentful_id,
icon: material.samplePic.src,
checked: false,
}))
options[0].checked = true
const handleGetValue = (value) => { setValue(value) }
return (
<>
<MDBSelect
name={props.name}
getValue={handleGetValue}
label={props.label}
options={options}
color="primary"
outline
/>
{meta.touched && meta.error && {meta.error}} )}
</>
)
}
Jakub Chmura staff premium commented 5 years ago
Hi @Malasharhan,
When you console.log you achieve proper value of select using getValue prop ?
Did you achieve any error in developer tools console ?
Best, Kuba
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Free
- Premium support: No
- Technology: MDB React
- MDB Version: 4.25.1
- Device: PC
- Browser: Chrome
- OS: Windows 10
- Provided sample code: No
- Provided link: No
Piotr Glejzer staff commented 5 years ago
Did you try to use getvalue function? I see there is no option with the event onChange, I don't know why it is not added... I will add that to the controlled select. Sorry about that.