How to use MDBSelect with Formik

Topic: How to use MDBSelect with Formik

Malasharhan free asked 4 years ago

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>

Piotr Glejzer staff commented 4 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.

Add comment

imliviu@gmail.com free answered 4 years ago

0 0 Best answer

<p>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.</p>

<pre class="prettyprint"><code>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}} )}
    </>
)
}
</code></pre>

Please insert min. 20 characters.

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 commented 4 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

Add comment

Piotr Glejzer staff answered 4 years ago

0 0 Best answer

<p>I mean <code>getvalue</code> with something like that </p>

<pre class="prettyprint"><code>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;
</code></pre>

Please insert min. 20 characters.

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;

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

ForumUser: 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

Malasharhan

57Support score
9Questions 1Answers 0Snippets