A component is changing an uncontrolled input of type text to be controlled error in ReactJS

Question

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     Following is my code   constructor props      super props     this state         fields          errors           this onSubmit   this onSubmit bind this            onChange field  e     let fields   this state fields    fields field    e target value    this setState  fields             render       return       lt div className  form-group  gt         lt input         value  this state fields  name            onChange  this onChange bind this   name            className  form-control          type  text          refs  name          placeholder  Name            gt         lt span style   color   red    gt  this state errors  name    lt  span gt       lt  div gt

User · Answer

Put empty value if the value does not exist or null  value   this state value     quot  quot

User · Answer

Change this   const  values  setValues    useState  intialStateValues     for this   const  values  setValues    useState intialStateValues

User · Answer

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   Solution   Check if value is not undefined  React   Formik   Bootstrap   TypeScript  example       values  purchaseObligation remainingYear      lt Input    tag  Field     name  purchaseObligation remainingYear     type  text     component  input      gt    null

User · Answer

Using React Hooks also don t forget to set the initial value  I was using  lt input type  datetime-local  value  eventStart    gt  and initial eventStart was like    const  eventStart  setEventStart    useState    instead const  eventStart  setEventStart    useState          The empty string in parentheses is difference  Also  if you reset form after submit like i do  again you need to set it to empty string  not just to empty parentheses     This is just my small contribution to this topic  maybe it will help someone

User · Answer

SIMPLY  You must set initial state first  If you don t set initial state react will treat that as an uncontrolled component

User · Answer

Multiple Approch can be applied   Class Based Approch  use local state and define existing field with default value   constructor props        super props       this state           value               lt input type  text                    name  firstName                    value  this state value                    className  quot col-12 quot                    onChange  this onChange                    placeholder  Enter First name    gt     Using Hooks React  gt  16 8 in functional style components    value  setValue    useState       lt input type  text                    name  firstName                    value  value                    className  quot col-12 quot                    onChange  this onChange                    placeholder  Enter First name    gt     If Using propTypes and providing Default Value for propTypes in case of HOC component in functional style    HOC propTypes         value         PropTypes string       HOC efaultProps         value          function HOC        return   lt input type  text                    name  firstName                    value  this props value                    className  quot col-12 quot                    onChange  this onChange                    placeholder  Enter First name    gt

User · Answer

In addition to the accepted answer  if you re using an input of type checkbox or radio  I ve found I need to null undefined check the checked attribute as well    lt input   id  myId    name  myName    type  checkbox     or  radio    value  myStateValue          checked  someBoolean   someBoolean   false      gt    And if you re using TS  or Babel   you could use nullish coalescing instead of the logical OR operator   value  myStateValue        checked  someBoolean    false

User · Answer

The reason of this problem when input field value is undefined then throw the warning from react  If you create one changeHandler for multiple input field and  you want to change state with changeHandler then you need to assign previous value using by spread operator  As like my code here  constructor props       super props      this state             user               email                 password                          This handler work for every input field changeHandler   event  gt          Dynamically Update State when change input value     this setState           user                  this state user               event target name  event target value                     submitHandler   event  gt       event preventDefault           Your Code Here       render        return            lt div className  quot mt-5 quot  gt                       lt form onSubmit  this submitHandler  gt                   lt input type  quot text quot  value  this state user email  name  quot email quot  onChage  this changeHandler    gt                                    lt input type  quot password quot  value  this state user password  name  quot password quot  onChage  this changeHandler    gt                    lt button type  quot submit quot  gt Login lt  button gt               lt  form gt                   lt  div gt

User · Answer

Inside the component put the input box in the following way    lt input className  class-name                type   text                id  id-123                value   this state value                       name  field-name                placeholder  Enter Name                  gt

User · Answer

Set Current State first    this state  Its because when you are going to assign a new state it may be undefined  so it will be fixed by setting state extracting current state also  this setState     this state  field     If there is an object in your state  you should set state as follows  suppose you have to set username inside the user object   this setState  user     this state user    username    username

User · Answer

In my case it was pretty much what Mayank Shukla s top answer says  The only detail was that my state was lacking completely the property I was defining   For example  if you have this state   state          a     A        b     B       If you re expanding your code  you might want to add a new prop so  someplace else in your code you might create a new property c whose value is not only undefined on the component s state but the property itself is undefined   To solve this just make sure to add c into your state and give it a proper initial value   e g     state          a     A        b     B        c     C      added and initialized property      Hope I was able to explain my edge case

User · Answer

If you use multiple input in on field  follow  For example    class AddUser extends React Component      constructor props        super props         this state            fields    UserName      Password                        onChangeField   event   gt        let name   event target name      let value   event target value      this setState prevState   gt            prevState fields name     value          return              fields  prevState fields                            render           const   UserName  Password     this state fields       return             lt form gt                lt div gt                    lt label htmlFor  UserName  gt UserName lt  label gt                    lt input type  text                           id  UserName                           name  UserName                          value  UserName                          onChange  this onChangeField   gt                 lt  div gt                 lt div gt                     lt label htmlFor  Password  gt Password lt  label gt                     lt input type  password                            id  Password                            name  Password                           value  Password                           onChange  this onChangeField   gt                 lt  div gt            lt  form gt                   Search your problem at   onChangeField   event   gt        let name   event target name      let value   event target value      this setState prevState   gt            prevState fields name     value          return               fields  prevState fields

User · Answer

Changing value to defaultValue will resolve it   Note       defaultValue is only for the initial load    If you want to initialize the input then you should use defaultValue  but if you want to use state to change the value then you need to use value  Read this for more    I used value  this state input       in input to get rid of that warning

User · Answer

const  name  setName    useState     generates error as soon as you type in the text field  const  name  setName    useState         lt -- by putting in quotes    will fix the issue on this string example

User · Answer

The reason is  in state you defined   this state     fields         fields as a blank object  so during the first rendering this state fields name will be undefined  and the input field will get its value as   value  undefined    Because of that  the input field will become uncontrolled    Once you enter any value in input  fields in state gets changed to   this state     fields   name   xyz       And at that time the input field gets converted into a controlled component  that s why you are getting the error      A component is changing an uncontrolled input of type text to be   controlled    Possible Solutions   1- Define the fields in state as   this state     fields   name          2- Or define the value property by using Short-circuit evaluation like this   value  this state fields name              undefined

[javascript] A component is changing an uncontrolled input of type text to be controlled error in ReactJS

Examples related to javascript

Examples related to reactjs