3

I am using react-hook-form(https://react-hook-form.com/ ) 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

1 Answer 1

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 Autocomplete, 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 Autocomplete from "@material-ui/lab/Autocomplete";

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)}>
      <Autocomplete
        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>
  );
}
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.