How to change the zIndex and reorder components in react-konva?
When you are working with Konva directly you have many methods to change the order of nodes like node.zIndex(5), node.moveToTop(), etc. Tutorial.
But it is not recommended to use these methods when you are working with the React framework.
react-konva is trying to follow the order of the nodes exactly as you described them in render(). So instead of changing the zIndex manually, you just need to update the state of the app correctly, so the render() returns the correct order.
Don’t use the zIndex for your canvas components.
If you want to temporarily move a node into another container, for example when you want to show an overlay, take a look into the Canvas Portal demo.
Instructions: Try to drag a circle. See how it goes to the top. We are doing this by manipulating the state so that the render() method returns the correct order.