I am using react-hook-form(/ ) in my demo.

I am not able to set the default value of AutoComplete. I already tried defaultValue as mention in the documentation but it is not working. Here is my code:

 const { register, handleSubmit, setValue } = useForm({
    defaultValues: {
      resolutionCode: 1993
    }
  });

expected output Schindler's List value should be selected

I am using react-hook-form(https://react-hook-form./ ) in my demo.

I am not able to set the default value of AutoComplete. I already tried defaultValue as mention in the documentation but it is not working. Here is my code:

https://codesandbox.io/s/react-hook-form-get-started-v24jk

 const { register, handleSubmit, setValue } = useForm({
    defaultValues: {
      resolutionCode: 1993
    }
  });

expected output Schindler's List value should be selected

• javascript
• reactjs
• react-hooks
• react-hook-form

Share Improve this question Follow edited Feb 7, 2020 at 4:48 wentjun 42.6k1010 gold badges107107 silver badges114114 bronze badges asked Feb 7, 2020 at 4:25 user944513user944513 12.8k5252 gold badges185185 silver badges348348 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

First, you will need to use the getValues() method from react-hook-form to get the values of the form state.

const { register, handleSubmit, setValue, getValues } = useForm({
  defaultValues: {
    resolutionCode: 1993
  }
});

Then your Autoplete, you should set the defaultValue props such that it returns the object in the top100Films array that matches the year (1993).

defaultValue={top100Films.find((film) => film.year === getValues().resolutionCode)}

Here is the full changes to your code (forked your demo with the changes over here):

import React from "react";
import ReactDOM from "react-dom";
import { useForm } from "react-hook-form";
import { Button, TextField, Typography } from "@material-ui/core";
import Autoplete from "@material-ui/lab/Autoplete";

const top100Films = [
  { title: "The Shawshank Redemption", year: 1994 },
  { title: "The Godfather", year: 1972 },
  { title: "The Godfather: Part II", year: 1974 },
  { title: "The Dark Knight", year: 2008 },
  { title: "12 Angry Men", year: 1957 },
  { title: "Schindler's List", year: 1993 }
];
function App() {
  const { register, handleSubmit, setValue, getValues } = useForm({
    defaultValues: {
      resolutionCode: 1993
    }
  });

  React.useEffect(() => {
    register({ name: "resolutionCode" });
  });
  const onSubmit = data => {
    console.log(data);
  };
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Autoplete
        options={top100Films}
        getOptionLabel={option => option.title}
        defaultValue={top100Films.find((film) => film.year === getValues().resolutionCode)}
        onChange={(e, data) => {
          setValue("resolutionCode", data.year);
        }}
        renderInput={params => {
          return (
            <TextField
              {...params}
              // inputRef={register}
              label={"Resolution Code"}
              variant="outlined"
              name={"resolutionCode"}
              defaultValue={"1993"}
              fullWidth
              value={params}
            />
          );
        }}
      />
      <div className="button-group">
        <Button
          variant="contained"
          type="submit"
          className="MuiButton-sizeMedium"
          color="primary"
          disableElevation
        >
          Login
        </Button>
      </div>
    </form>
  );
}