Fix missing key for cssinput

src/Components/ContainerProperties/ContainerForm.tsx

@@ -23,6 +23,7 @@ function GetCSSInputs(properties: IContainerProperties,
   for (const key in properties.style) {
     groupInput.push(<TextInputGroup
       key={key}
+      id={key}
       labelText={key}
       inputKey={key}
       labelClassName=''
@@ -62,7 +63,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
         value={props.properties.type}
         isDisabled={true} />
       <TextInputGroup
-        key={`${props.properties.id}-displayedText`}
+        id={`${props.properties.id}-displayedText`}
         labelText='Displayed text'
         inputKey='displayedText'
         labelClassName=''
@@ -71,7 +72,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
         value={props.properties.displayedText?.toString()}
         onChange={(value) => props.onChange('displayedText', value)} />
       <TextInputGroup
-        key={`${props.properties.id}-x`}
+        id={`${props.properties.id}-x`}
         labelText='x'
         inputKey='x'
         labelClassName=''
@@ -91,7 +92,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
           )
         )} />
       <TextInputGroup
-        key={`${props.properties.id}-y`}
+        id={`${props.properties.id}-y`}
         labelText='y'
         inputKey='y'
         labelClassName=''
@@ -100,7 +101,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
         value={(props.properties.y - (props.properties.margin?.top ?? 0)).toString()}
         onChange={(value) => props.onChange('y', Number(value) + (props.properties.margin?.top ?? 0))} />
       <TextInputGroup
-        key={`${props.properties.id}-minWidth`}
+        id={`${props.properties.id}-minWidth`}
         labelText='Minimum width'
         inputKey='minWidth'
         labelClassName=''
@@ -110,7 +111,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
         value={props.properties.minWidth.toString()}
         onChange={(value) => props.onChange('minWidth', Number(value))} />
       <TextInputGroup
-        key={`${props.properties.id}-maxWidth`}
+        id={`${props.properties.id}-maxWidth`}
         labelText='Maximum width'
         inputKey='maxWidth'
         labelClassName=''
@@ -120,7 +121,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
         value={props.properties.maxWidth.toString()}
         onChange={(value) => props.onChange('maxWidth', Number(value))} />
       <TextInputGroup
-        key={`${props.properties.id}-width`}
+        id={`${props.properties.id}-width`}
         labelText='Width'
         inputKey='width'
         labelClassName=''
@@ -132,7 +133,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
         onChange={(value) => props.onChange('width', ApplyWidthMargin(Number(value), props.properties.margin.left, props.properties.margin.right))}
         isDisabled={props.properties.isFlex} />
       <TextInputGroup
-        key={`${props.properties.id}-height`}
+        id={`${props.properties.id}-height`}
         labelText='Height'
         inputKey='height'
         labelClassName=''
@@ -142,7 +143,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
         value={(props.properties.height + (props.properties.margin?.top ?? 0) + (props.properties.margin?.bottom ?? 0)).toString()}
         onChange={(value) => props.onChange('height', Number(value) - (props.properties.margin?.top ?? 0) - (props.properties.margin?.bottom ?? 0))} />
       <TextInputGroup
-        key={`${props.properties.id}-ml`}
+        id={`${props.properties.id}-ml`}
         labelText='Margin left'
         inputKey='left'
         labelClassName=''
@@ -152,7 +153,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
         value={(props.properties.margin.left ?? 0).toString()}
         onChange={(value) => props.onChange('left', Number(value), PropertyType.Margin)} />
       <TextInputGroup
-        key={`${props.properties.id}-mb`}
+        id={`${props.properties.id}-mb`}
         labelText='Margin bottom'
         inputKey='bottom'
         labelClassName=''
@@ -162,7 +163,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
         value={(props.properties.margin.bottom ?? 0).toString()}
         onChange={(value) => props.onChange('bottom', Number(value), PropertyType.Margin)} />
       <TextInputGroup
-        key={`${props.properties.id}-mt`}
+        id={`${props.properties.id}-mt`}
         labelText='Margin top'
         inputKey='top'
         labelClassName=''
@@ -172,7 +173,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
         value={(props.properties.margin.top ?? 0).toString()}
         onChange={(value) => props.onChange('top', Number(value), PropertyType.Margin)} />
       <TextInputGroup
-        key={`${props.properties.id}-mr`}
+        id={`${props.properties.id}-mr`}
         labelText='Margin right'
         inputKey='right'
         labelClassName=''

src/Components/InputGroup/TextInputGroup.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 
 interface ITextInputGroupProps {
   /** Use key the same way as React.Key */
-  key: string
+  id: string
   labelKey?: string
   labelText: string
   inputKey: string
@@ -24,7 +24,7 @@ export function TextInputGroup(props: ITextInputGroupProps): JSX.Element {
 
   React.useEffect(() => {
     setValue(props.value);
-  }, [props.value, props.key]);
+  }, [props.value, props.id]);
 
   function OnKeyUp(event: React.KeyboardEvent): void {
     switch (event.key) {