Why Can't I Change My Input Value In React Even With The Onchange Listener

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

Solution 1:

Unlike in the case of Angular, in React.js you need to update the state manually. You can do something like this:

<input
    id={'todoName' + this.props.id}
    className="form-control"
    type="text"
    value={this.state.name}
    onChange={e => this.onTodoChange(e.target.value)}
/>

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
    };
  }

Solution 2:

You can do shortcut via inline function if you want to simply change the state variable without declaring a new function at top:

<input type="text" onChange={e =>this.setState({ text: e.target.value })}/>

Solution 3:

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)
    }
    
    
<input className="form-control" type="text" value={this.state.name} id={'todoName' + this.props.id} onChange={this.onTodoChange}/>

onTodoChange(e){
         const {name, value} = e.target;
        this.setState({[name]: value});
   
}

Solution 4:

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 statethis.setState({name: event.target.value});
}

Solution 5:

In react, state will not change until you do it by using this.setState({});. That is why your console message showing old values.