From ca79e18e53377dfc750dc68eaf7f0d0a0f9ed311 Mon Sep 17 00:00:00 2001
From: Siklos <siklos@tuta.io>
Date: Sun, 31 Jul 2022 19:00:24 +0200
Subject: [PATCH] Better handling of Container keys

---
 src/App.tsx                        | 1 +
 src/SVG/Elements/Container.tsx     | 6 ++----
 src/SVG/Elements/MainContainer.tsx | 1 +
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 12cf62d..74b3034 100644
--- a/src/App.tsx
+++ b/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,
diff --git a/src/SVG/Elements/Container.tsx b/src/SVG/Elements/Container.tsx
index 9c4dc9a..b1cf0d7 100644
--- a/src/SVG/Elements/Container.tsx
+++ b/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}
diff --git a/src/SVG/Elements/MainContainer.tsx b/src/SVG/Elements/MainContainer.tsx
index 26ba7cc..725a032 100644
--- a/src/SVG/Elements/MainContainer.tsx
+++ b/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}