0

So i'm using the useState webhook to change the user's age value with this function, but it have a problem. I don't know why but always i want update the value it updates with delay.

import React, {useState} from 'react'
const [age, setAge] = useState('')

const changeAge = event => {
  setAge(event.target.value)
  console.log(age)
}

const UserInfo = () =>
  <select
    id="age"
    value={age}
    onChange={changeAge}
  >
    <option value={10}>Ten</option>
    <option value={20}>Twenty</option>
  </select>

export default UserInfo

I put that console.log in changeAge function to see what was going wrong. When I change the input for the first time, the console.log prints nothing (""), but when I change it for the second time it prints the previous value I placed. Like:

  • First time: (option "Ten" was clicked) // output: ""
  • Second time: (option "Twenty" was clicked) // output: '10'
  • Third time: (option "Ten" was clicked) // output: '20'

Can please someone resolve me the bug?

VicktzZ
  • 1
  • 1
  • The value of your `age` variable doesn't change when you call `setAge`. The update isn't reflected until the subsequent render. – ray Oct 13 '22 at 21:18

0 Answers0