State is undefined on child component callback

[mflash123]

Parent component:

const [value, setValue] = useState();
...
const someAction = () => {
setValue(123)
}

const emojiHandle = () => {
console.log(value) //display undefined
}
...
...
return(
...
<Emoji callback={handleEmojiChange} /> // -> child component :  onEmojiClick={callback}
<button onClick={someAction}>Press me 1st</button>
)

So, problem is that State is undefined on child component callback.
Reproduction:
Press the button to set state.
Then press on any Emojy to execute callback from parent component and display state.
Callback will show undefined state, which you already set when you press the button.

How to get access to state?

[ealush]

Hey, I am trying to reproduce with your example but I am not sure I am experiencing the bug. Would you mind sharing forking this blitz and sharing what you experience?
https://stackblitz.com/edit/emoji-picker-react-gxa6r9?file=index.js

click fork at the top:

[mflash123]

Hey, I am trying to reproduce with your example but I am not sure I am experiencing the bug. Would you mind sharing forking this blitz and sharing what you experience?
https://stackblitz.com/edit/emoji-picker-react-gxa6r9?file=index.js

click fork at the top:

Thanks for reply.
I post a code:
https://stackblitz.com/edit/emoji-picker-react-uxwzsl

UPD
It doesnt depends from child, in a same component, same problem
https://stackblitz.com/edit/react-ck9qgf

[ealush]

I see. this is really weird. I will have to debug this. Thanks for reporting.

[j-edward]

Is there any update on this?

[jlevy-io]

I slightly adjusted your code and it seems to work this way. Nothing was being re-rendered so the value was not changing. I added a useEffect that re-renders the App component when value changes

https://stackblitz.com/edit/emoji-picker-react-jakfvz

[LetHergo]

yes, I also have this problem.
onEmojiClick callBack can not get props value
@ealush

[zpzxgcr]

yes, I also have this problem.
onEmojiClick callBack can not get props value
@ealush

[ealush]

Hey guys, sorry for taking so long with this.

I believe that the latest version (3.2.3) should solve this issue.

For anyone interested in the details: 2e19179

The picker had two bugs that caused this unexpected behavior.

1. Stored the consumer's onClick handler in the useReducer hook as an initial value, meaning that it never got refreshed past the initial render - so it always stuck with the first initial scope references. But fixing this was not enough because:
2. Some of the emoji components are memoized, so they only kept reference to the recent-render handler, which lead to outdated scope variables. Now I store your click handler inside a ref, and always access the function from there.

These two seem to solve the issue, can anyone please post back to see if it works.

[paladin952]

I still face this issue on 4.5.1

[ealush]

Hey @paladin952 this is a closed and old issue. Can you please create a new issue with reproduction steps?