how to use material-ui autocomplete feature in react-hook-from

Question

I am using react-hook-form in my application,and I used autocomplete in react-hook-form.

My autocomplete has dropdown values like 1988, 1987, 1986, I thought that I need not use onchange event for this autocomplete and when I select 1988 from the dropdown, that value gets passed by react-hook-form without using onchange event. , However, when I select a value from autocomplete and submit the react-hook-form, 0 is being passed as param instead of the actual value.

I know that we can use onChange event and set the selected dropdown value into the state, however I am not thinking of doing any state management for the form variables because react-hook-form interally uses state management and sends the data automatically on submitting the form. Below is my code. May I know if using the onChange event and then setting the selected dropdown value to state is the only solution to this?

export default function RegistratioinForm() {

const { handleSubmit, control } = useForm();
const handleSubmit = (data) => {

 console.log(data) (here in this data, I am seeing 0 as being passed, instead of the selected values 1988 or 1987 or 1986
}
 const options = [1988, 1987, 1986]
return(
<form className={classes.root} onSubmit={handleSubmit(onSubmit)}>

            <Grid
                    <AutoComplete
                        options={options}
                        control={control}
                        name="year"
                        label="Select Year" (I am not using onchange event expecting that react-hook-form sends the selected dropdown value directed, however 0 is being passed when I select any one of the dropdown values.)
                 

                    />

 );

hendra · Accepted Answer · 2021-07-31 06:54:09Z

1

You need to use Controller from react-hook-form.

What Autocomplete-Component are you using? This example assumes you're using Autocomplete from @material-ui/lab:

<Controller
      name={"year"}
      control={control}
      render={({ field: { onChange, ...controllerProps } }) => (
        <Autocomplete
          {...controllerProps}
          onChange={(e, data) => onChange(data)}
          options={options}
          getOptionLabel={(option) => option.title}
          renderInput={(params) => <TextField {...params} label="Select Year" />}
          )}
        />
      )}
    />

answered Jul 31, 2021 at 6:54

hendra

2,6515 gold badges24 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

balaji Over a year ago

I am using controller, forgot to add that controller code here, sorry about that, also I am material ui autocomplete, but I am not using this statement onChange={(e, data) => onChange(data)}, I think with this statement, I need not do state management again, i will try this and update you in 5 mins. thank you :)

balaji Over a year ago

Yes, this line of code onChange={(e, data) => onChange(data)} made the difference, thanks again :)

Collectives™ on Stack Overflow

how to use material-ui autocomplete feature in react-hook-from

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related