Using <TextField /> component from material-ui with react-hook-form shows warning

Question

I am using react-hook-form for form state management in my application. When I am using <Input /> as a control, it works as expected, however with <TextField /> it shows a warning saying "A component is changing an uncontrolled input of type text to be controlled." What's going wrong here? Is there any alternative for this component?

Here is my react code:

import React from "react";
import "./styles.css";
import { useForm, Controller } from "react-hook-form";
import Joi from "@hapi/joi";
import { TextField, createMuiTheme, ThemeProvider } from "@material-ui/core";

const validationSchema = Joi.object({
  username: Joi.string()
    .alphanum()
    .min(3)
    .max(30)
    .required()
});

const theme = createMuiTheme({
  palette: {
    type: "dark"
  }
});

const resolver = (data, validationContext) => {
  const { error, value: values } = validationSchema.validate(data, {
    abortEarly: false
  });

  return {
    values: error ? {} : values,
    errors: error
      ? error.details.reduce((previous, currentError) => {
          return {
            ...previous,
            [currentError.path[0]]: currentError
          };
        }, {})
      : {}
  };
};

export default function App() {
  const { register, handleSubmit, errors, control } = useForm({
    validationResolver: resolver,
    validationContext: { test: "test" }
  });

  console.log("error", errors);

  return (
    <ThemeProvider theme={theme}>
      <div className="App">
        <h1>Hello CodeSandbox</h1>

        <form onSubmit={handleSubmit(d => console.log(d))}>
          <label>Username</label>
          <Controller as={<input />} name="username" control={control} />
          <Controller
            as={<TextField />}
            name="firstName"
            label="First Name"
            control={control}
          />
          <input type="submit" />
        </form>
      </div>
    </ThemeProvider>
  );
}

and here is a link to it in a sandbox: https://codesandbox.io/s/react-hook-form-validationresolver-7k33n

It means you need to bind the data-flow to the TextField, usually set the props value onChange properly would solve this problem, which is also necessary for your demand implements — keikai

Clarity Clarity · Accepted Answer · 2020-03-12T13:31:56

You can fix the warning by supplying default values to your input elements to prevent them from being undefined initially:

 <Controller
  as={<input />}
  name="username"
  control={control}
  defaultValue=""
/>
<Controller
  as={<TextField />}
  name="firstName"
  label="First Name"
  control={control}
  defaultValue=""
/>

Using <TextField /> component from material-ui with react-hook-form shows warning

1 Answers