Topic: MDB5, formik & MDSelect : Cannot get value

Kaherdino priority asked 1 year ago


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


marebear free answered 1 year ago


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 1 year 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.


Krzysztof Wilk staff answered 1 year ago


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!



Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue

  • User: 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