How to use Formik to get Values from Material UI Select Fields

Question

Pardon me, i want to understand & achieve something using Formik.

I have two select fields and i want to pass their selected value to formik value. What they do basically is to get CountryArray and their corresponding regions. The reason i created them as a standalone component was, so i could pass them to the Field component in Formik. My countries Array is coming from import countries from "../data/c-r";. I'm also using useState from react. But i know when using formik, you don't need to manage your state anymore, cus Formik does that. How can i achieve that.

  const [country, setCountry] = useState("");
  const [region, setRegion] = useState("");

  const CountryComponent = () => (
    <FormControl>
      <InputLabel id="demo-simple-select-label">Country</InputLabel>
      <Select
        labelId="demo-simple-select-label"
        id="demo-simple-select"
        value={country}
        onChange={handleChangeCountry}
      >
        {countries.map(country => (
          <MenuItem value={country} key={country.countryShortCode}>
            {country.countryName}
          </MenuItem>
        ))}
      </Select>
    </FormControl>
  );

  const StateComponent = () => (
    <FormControl>
      <InputLabel id="demo-simple-select-label">Region</InputLabel>
      <Select
        labelId="demo-simple-select-label"
        id="demo-simple-select"
        value={region}
        onChange={handleChangeRegion}
        disabled={!country}
      >
        {country
          ? country.regions.map(region => (
              <MenuItem value={region} key={region.shortCode}>
                {region.name}
              </MenuItem>
            ))
          : []}
      </Select>
    </FormControl>
  );

Which i did...

<Field
      type="select"
      placeholder="State"
      name="state"
      as={StateComponent}
      fullWidth
      label="Select State"
    />

   <Field
     type="select"
     placeholder="Country"
     name="country"
     as={CountryComponent}
     fullWidth
     label="Select Country"
   />

The Problem is i can't get the values of both region and country in the Formik Value, how can i do that?

Thank you!

Answer 1

I was trying to do something similar to create a country select field with Formik and Material UI.

When using this combination of libraries, (Formik and Material-UI) I recommend also to use Formik Material-UI to make your life easier and forget about having to pass the values of the fields to the components.

About the custom select component, what I do is to create it with TextField component instead of Select component of Material-UI, in the way that is explained here, but using the TextField from Formik Material-UI library.

So in the form, you use the Field component like so:

<Field
  name='country'
  type='text'
  component={CountrySelect}
  label='Country'
  margin='normal'
  variant='outlined'
/>

And the custom component would be created this way:

import { MenuItem} from '@material-ui/core';
import { TextField } from 'formik-material-ui';

const CountrySelect = (props) => {

    const [countries, setCountries] = useState([]);

    useEffect(() => {
        const loadData = () => {
           [..]
        };
        loadData();
    }, []);

    return (
        <TextField
            select
            {...props}
        >
            {countries.length ?
                countries.map((country) => (
                    <MenuItem key={country.code} value={country.code}>
                        {country.name}
                    </MenuItem>
                ))
                :
                <MenuItem>loading...</MenuItem>
            }
        </TextField >
    );

};

Here you can see an example: https://codesandbox.io/s/dreamy-franklin-j384c