How to use React Material UI’s Autocomplete component with Formik?

Sometimes, we want to use React Material UI’s Autocomplete component with Formik.

In this article, we’ll look at how to use React Material UI’s Autocomplete component with Formik.

How to use React Material UI’s Autocomplete component with Formik?

To use React Material UI’s Autocomplete component with Formik, we can call Formik’s setFieldValue function with the name prop value of the Autocomplete and the value that is selected.

For instance, we write:

import React from "react";
import { Formik, Form } from "formik";
import TextField from "@material-ui/core/TextField";
import Autocomplete from "@material-ui/lab/Autocomplete";
import Button from "@material-ui/core/Button";

const cities = [
  { name: "New York", value: 1, state: "NY" },
  { name: "San Francisco", value: 2, state: "CA" },
  { name: "Los Angeles", value: 3, state: "CA" }
];

export default function App() {
  return (
    <div>
      <Formik
        initialValues={{ cityId: 1 }}
        onSubmit={({ cityId }) => {
          console.log(cityId);
        }}
      >
        {({ handleChange, values, setFieldValue }) => (
          <Form>
            <Autocomplete
              id="cityId"
              name="cityId"
              options={cities}
              groupBy={(option) => option.state}
              getOptionLabel={(option) => option.name}
              style={{ width: 300 }}
              onChange={(event, value) => {
                setFieldValue("cityId", value.value);
              }}
              renderInput={(params) => (
                <TextField
                  {...params}
                  onChange={handleChange}
                  margin="normal"
                  label="Cities"
                  fullWidth
                  value={values?.cityId}
                />
              )}
            />

            <Button variant="contained" color="primary" type="submit">
              Submit
            </Button>
          </Form>
        )}
      </Formik>
    </div>
  );
}

We add the Form component with the Autocomplete component inside.

We set the onChange prop of the Autocomplete to a function that calls setFieldValue with the Autocomplete‘s name prop’s value and the value parameter.

The value parameter has the whole object that’s selected from cities.

Next, we set the getOptionLabel prop to return the property value to display in the options.

And we set the value prop of the TextField to the values?.cityId property to display the selected choice.

Then we set the onSubmit prop of the Formik component to a function that takes the object with submitted values as the parameter and logs the selected value.

As a result, when we select an item and click Submit, we see that the cityId value is set to the value property of the cities entry that’s selected.

Conclusion

To use React Material UI’s Autocomplete component with Formik, we can call Formik’s setFieldValue function with the name prop value of the Autocomplete and the value that is selected.