Breaking News: Grepper is joining You.com. Read the official announcement!

mui autocomplete use with formik

Sutirath answered on July 27, 2023 Popularity 7/10 Helpfulness 4/10

answer mui autocomplete use with formik

mui autocomplete use with formik

Comment

import React from 'react';
import { useFormik } from 'formik';
import Autocomplete from '@mui/material/Autocomplete';
import TextField from '@mui/material/TextField';

const data = [
  { label: 'The Godfather', id: 1 },
  { label: 'Pulp Fiction', id: 2 },
];

const MyForm = () => {
  const formik = useFormik({
    initialValues: {
      movie: null, // Set the initial selected value to null or any other default value
    },
    onSubmit: (values) => {
      console.log('Form Values:', values);
    },
  });

  return (
    <form onSubmit={formik.handleSubmit}>
      <Autocomplete
        options={data}
        getOptionLabel={(option) => option.label}
        renderInput={(params) => <TextField {...params} label="Movie" />}
        // Customizing how the item is displayed in the dropdown list
        renderOption={(props, option) => (
          <li {...props}>
            {/* Using the label for display in the list */}
            {option.label}
          </li>
        )}
        // Using the id as the value of the selected option
        value={formik.values.movie}
        onChange={(event, newValue) => {
          // Access the selected value's id using `newValue.id`
          formik.setFieldValue('movie', newValue); // Update Formik field value
        }}
      />
      <button type="submit">Submit</button>
    </form>
  );
};

export default MyForm;

Popularity 7/10 Helpfulness 4/10 Language whatever

Source: chat.openai.com

Tags: autocomplete formik mui whatever

Link to this answer
Share Copy Link

Contributed on Jul 27 2023

Sutirath

0 Answers Avg Quality 2/10

mui autocomplete use with formik

Contents

More Related Answers

mui autocomplete use with formik

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.