Losing state inside eventHandler

user_8946089 0
Viewed 53
const [page,setPage] = useState()

console.log(page) // gives "Page1" upon state update
const onValueChange = (event) => {
    console.log(page); //gives undefined upon state update
};

<Input
onChange={(e) => onValueChange(e)}         
/>

<SelectDropdown
onChange={() => setPage("Page1")}
value={page}
/>

Above code is a brief example on how I cant access the state "page" inside the function from an eventHandler, how is it possible to access the state inside onValueChange().

reactjs javascript
2 Answers

Change setStorageId to setPage in your SelectDropDown component

user_136795800

Your could should work as it is normally. An explanation of why you getting undefined in onValueChange is that you are changing the value of the Input before changing SelectDropdown's value, in witch case it's normal, because this line :

const [page,setPage] = useState()

sets page to undifined. You can test it here on this CodeSandbox I just created.

user_152886410
Related