[Frontend/Warning] Warning: A component is changing an uncontrolled input of type text to be controlled.

에러화면

Warning: A component is changing an uncontrolled input of type text to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info: https://fb.me/react-controlled-components
    in input (created by ForwardRef(InputBase))
    in div (created by ForwardRef(InputBase))
    in ForwardRef(InputBase) (created by WithStyles(ForwardRef(InputBase)))
    in WithStyles(ForwardRef(InputBase)) (created by ForwardRef(Input))
    in ForwardRef(Input) (created by WithStyles(ForwardRef(Input)))
    in WithStyles(ForwardRef(Input)) (created by ForwardRef(TextField))
    in div (created by ForwardRef(FormControl))
    in ForwardRef(FormControl) (created by WithStyles(ForwardRef(FormControl)))
    in WithStyles(ForwardRef(FormControl)) (created by ForwardRef(TextField))
    in ForwardRef(TextField) (created by WithStyles(ForwardRef(TextField)))
    in WithStyles(ForwardRef(TextField)) (at src/index.js:91)
    in RHFInput (at src/index.js:90)
    in section (at src/index.js:88)
    in div (at src/index.js:47)
    in form (at src/index.js:43)
    in ThemeProvider (at src/index.js:42)
    in App (at src/index.js:166)

 

---

해결방법

Just give a default value or value={value|| ''} will solve the issue

👍 19🎉 6❤️ 4

 

<input
  type="text"
  name="name"
  value={values.name || ""}
/>