useState hook setting different value than what is passed into setState()

Question

I have a select menu with some options. When I change the option in select menu I am setting the state of currentValue using setNewValue(event.target.value) and logging the new value of variable to the console.

However the value set for the variable is different from the value I am passing into setNewValue.

const classGrades = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let [classGrade, setClassGrade] = useState(1);
let classSelect = () => {
return (
       <div>
            <select value={classGrade} onChange={(e) => {
                setClassGrade(e.target.value)
                console.log(`I selected ${e.target.value}, so classgrade is now ${classGrade}`)
            }}>
                {classGrades.map(g => <option key={g} value={g}>{g}</option>)}
            </select>
        </div>
    )
}

Answer 1 · 2023-03-17T21:09:55Z

March 17, 2023 9:09pm

Looks like the issue is this:

useStateis an asynchronous hook and it doesn’t change the state immediately, it has to wait for the component to re-render.

see this article for more info: https://javascript.plainenglish.io/why-you-shouldnt-always-use-usestate-658994693018#:~:text=TL%3BDR%3A%20useState%20is%20an,t%20trigger%20a%20re%2Drender.

Welcome to the Treehouse Community

Looking to learn something new?

Abhimanu Saharan

Abhimanu Saharan

useState hook setting different value than what is passed into setState()

1 Answer

Clayton Perszyk

Clayton Perszyk