Hi Jurian, I analyzed your code.
First of all, congratulations! You are using Hooks!
Second point, function component in general is really nice, the downside is you cannot control re-renders with properties if you don't track it. In your particular widget you are using useEffect with a listener attached to the dom. The problem here is:
- If you are using dynamic context (in this case DataView), you will receive a re-render as soon as the properties are ready to use. But as you already attached the listener to the dom with the "componentDidMount" aka 'useEffect with no deps' it will not track the new prop and always will attach the old property.
My suggestion is: track the properties in ActionByKeyComponent to check if the action is already available (canExecute) and then attach to the dom. Or in the main component (ActionByKey) just render ActionByKeyComponent when you receive the property ready to execute (canExecute).
If you have further questions or you are curious to see how we implement Pluggable Widgets at Mendix, check our mono repo.
https://github.com/mendix/widgets-resources
Hi Jurian, i was checking this situation with the team responsible for the Pluggable Widgets API and it seems that your parameter is not available for the microflow or nanoflow. We can test it better if you provide in any way this project for us, or a reproducible case.
Thanks a lot
Diego
Widgets Team
Hi Diego,
Thanks for your reply! The comment I posted got messed up, because of the formatting so I thought let's write it as an answer.
Love that you use React at Mendix. I noticed the version updated to 16.8 lately, so I could use hooks.
You were right about the useEffect. It does not re-render as the props change, and for the useEffect, you have the optional parameter:
useEffect(() => {//code//}, [//parameter//]);
Reading your answer, I remembered I should have added the props in there like this:
useEffect((): void => {
document.addEventListener("keydown", isKeyCode, false);
}, [onPressKey && onPressKey.canExecute]);
Now it's working perfectly! Thanks so much for your reply, have a nice day!
Greets, Jurian