Why can t I change my input value in React even with the onChange listener

Question

I am quite new to React and after going through some tutorials  I was trying the below code of mine  I made one component  passed props to it from a store  on componentWillMount I make a new state for component  Rendering is fine till now  Next I bound my state to value of an input box and I have onChange listener as well  Still  I can t change my values in the field  Since  I am from Angular background  I am assuming binding input s value to state like below will automatically update the property name in state object  Am I wrong here  componentWillMount        this setState           updatable   false          name   this props name          status   this props status              relevant DOM from component s render function  lt input className  quot form-control quot  type  quot text quot  value  this state name  id   todoName    this props id  onChange  this onTodoChange bind this    gt   onTodoChange        console log this         consoling  this  here  shows old values only        not sure how and even if I need to update state here         Do I need to pass new state to this function from DOM       TODO  send new data to store    My onTodoChange function console the value of this which has same value of state as while initializing  How do I go about changing state by typing in input boxes  so that I can send them to the stores

User · Answer

I think it is best way for you  You should add this  this onTodoChange   this onTodoChange bind this   And your function has event param e   and get value  componentWillMount            this setState               updatable   false              name   this props name              status   this props status                 this onTodoChange   this onTodoChange bind this                   lt input className  quot form-control quot  type  quot text quot  value  this state name  id   todoName    this props id  onChange  this onTodoChange   gt   onTodoChange e            const  name  value    e target          this setState   name   value

User · Answer

In React  the component will re-render  or update  only if the state or the prop changes  In your case you have to update the state immediately after the change so that the component will re-render with the updates state value  onTodoChange event               update the state     this setState  name  event target value

User · Answer

In react  state will not change until you do it by using this setState       That is why your console message showing old values

User · Answer

Unlike in the case of Angular  in React js you need to update the state manually  You can do something like this   lt input     className  quot form-control quot      type  quot text quot  value  this state name      id   todoName    this props id      onChange  e   gt  this onTodoChange e target value     gt   And then in the function  onTodoChange value           this setState                name  value                    Also  you can set the initial state in the constructor of the component    constructor  props        super props       this state             updatable  false          name  props name          status  props status

User · Answer

If you would like to handle multiple inputs with one handler take a look at my approach where I m using computed property to get value of the input based on it s name  import React    useState   from  quot react quot   import  quot   style css quot    export default function App       const  state  setState    useState       name   quot John Doe quot       email   quot john doe test com quot           const handleChange   e   gt        setState          e target name   e target value                 return        lt div gt         lt input         type  quot text quot          className  quot name quot          name  quot name quot          value  state name          onChange  handleChange          gt          lt input         type  quot text quot          className  quot email quot          name  quot email quot          value  state email          onChange  handleChange          gt       lt  div gt

User · Answer

You can do shortcut via inline function if you want to simply change the state variable without declaring a new function at top   lt input type  quot text quot  onChange  e   gt  this setState   text  e target value      gt

[javascript] Why can't I change my input value in React even with the onChange listener

Examples related to javascript

Examples related to reactjs

Examples related to state

Examples related to onchange