CODEWITHSUNDEEP
reactjs
Hardik Gondalia
Hardik Gondalia

Reputation: 3717

onChange or onKeyUp event takes previous value in ReactJS

I've created form in ReactJS. I am fetching value in common method in {key : value} paired. but I am getting previous value in method.

constructor(props) {
        super(props);
        {
            this.state = { name: "", age: 0 };
        }
    }

    inputChange = (key, value) => {
        this.setState({ [key] : value });
        console.log(this.state);
    }

    render() {
        return (
            <form>
                <div>
                    Name : <input type="text" name="name" onKeyUp={(e) => this.inputChange('name', e.target.value)}></input>
                </div>
                <div>
                    Age : <input type="text" name="age" onKeyUp={(e) => this.inputChange('age', e.target.value)}></input>
                </div>
            </form>
        )
    }

I've attached the screenshot for better understanding. enter image description here

Upvotes: 0

Views: 1825

Answers (3)

Muneeb Ejaz
Muneeb Ejaz

Reputation: 884

update 2022

with functional components using useState hook this does not work longer, you have to use it in useEffect to update after rendering.

State updates from the useState() and useReducer() Hooks don't support the second callback argument. To execute a side effect after rendering, declare it in the component body with useEffect().

Upvotes: 0

josemartindev
josemartindev

Reputation: 1426

This will do exactly what you need.

class App extends Component {
  constructor(props){
    super(props)
    this.state = {
      name: '',
      age: ''
    }
  }

  handleInput(option, event){
      if (option === 'name') {
       this.setState({
            name: event.target.value
        }, () => {
          console.log("Name: ", this.state.name)
        });
      }
      else if (option === 'age'){
        this.setState({
            age: event.target.value
        }, () => {
          console.log("Age: ", this.state.age)
        });
      }
  }

  render() {
        return (
          <div>
            <div>
              <header>Name: </header>
              <input type="text" onChange={this.handleInput.bind(this, 'name')}/>
              <header>Age: </header>
              <input type="text" onChange={this.handleInput.bind(this, 'age')}/>
            </div>
          </div>
        );
      }
    }

Upvotes: 1

Ross Allen
Ross Allen

Reputation: 44880

setState enqueues a change to the state, but it doesn't happen immediately. If you need to do something after the state has changed, you can pass a second callback argument to setState:

inputChange = (key, value) => {
  this.setState({ [key] : value }, () => {
    console.log(this.state);
  });
}

Upvotes: 1

Related Questions