Konva Draggable Rect with Children

Question

I want to add a draggable Rect (red in the screenshot below) with children (the icon and text in the screenshot below). Whenever I try this, I get this error:

TypeError: parentInstance.add is not a function

Here is the code of just trying to add the text:

<Rect x={0} y={0} width={200} height={100} draggable fill="red">              
    <Text text="Pencil" />                                                      
</Rect> 

Answer 1

Rect or another other Konva shape can't have children elements. You can't nest on shape into another shape. For that case, you need to use Groups

<Group x={0} y={0} draggable>
  <Rect width={200} height={100} fill="red" />
  <Text text="Pencil" />                                                      
</Group>