Better handling of Container keys

src/App.tsx

@@ -70,6 +70,7 @@ class App extends React.Component<IAppProps> {
     }
 
     const container = new Container({
+      id: this.state.MainContainer.props.children.length.toString(),
       x: 0,
       y: 0,
       width: 300,

src/SVG/Elements/Container.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 
 interface IContainerProps {
+  id: string,
   // eslint-disable-next-line no-use-before-define
   children: Container[],
   x: number,
@@ -11,18 +12,15 @@ interface IContainerProps {
 }
 
 export class Container extends React.Component<IContainerProps> {
-  public static ContainerCount = 0;
-
   componentWillUnMount() {
   }
 
   public render(): React.ReactNode {
-    Container.ContainerCount++;
     const containersElements = this.props.children.map(child => child.render());
     return (
       <g
         transform={`translate(${this.props.x}, ${this.props.y})`}
-        key={`container-${Container.ContainerCount}`}
+        key={`container-${this.props.id}`}
       >
         <rect
           width={this.props.width}

src/SVG/Elements/MainContainer.tsx

@@ -16,6 +16,7 @@ export class MainContainer extends React.Component<IMainContainerProps> {
 
     return (
       <Container
+      id={'main'}
       x={0}
       y={0}
       width={this.props.width}