CODEWITHSUNDEEP
reactjsmaterial-uireact-hook-form
Mahesh
Mahesh

Reputation: 1635

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

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

Upvotes: 2

Views: 5650

Answers (1)

Clarity
Clarity

Reputation: 10873

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=""
/>

Upvotes: 4

Related Questions