From f3fdbb50fddba6cab817877905b6f51e0f0d1782 Mon Sep 17 00:00:00 2001
From: Sonja Happ <sonja.happ@eonerc.rwth-aachen.de>
Date: Thu, 27 May 2021 16:37:30 +0200
Subject: [PATCH] add missing key properties to get rid of warning

---
 src/dashboard/dashboard.js     | 21 ++++++++++++++-------
 src/widget/widget-container.js | 26 ++++++++++++++------------
 2 files changed, 28 insertions(+), 19 deletions(-)

diff --git a/src/dashboard/dashboard.js b/src/dashboard/dashboard.js
index 4b44a05..0af7555 100644
--- a/src/dashboard/dashboard.js
+++ b/src/dashboard/dashboard.js
@@ -508,11 +508,11 @@ class Dashboard extends Component {
     let dropZoneHeight = this.state.dashboard.height;
 
     return (<div className={boxClasses} >
-      <div className='section-header box-header'>
-        <div className="section-title">
+      <div key={"header-box"} className='section-header box-header'>
+        <div key={"title"} className="section-title">
           <h2>
             {this.state.dashboard.name}
-            <span className='icon-button'>
+            <span key={"toggle-lock-button"} className='icon-button'>
               <IconToggleButton
                 childKey={0}
                 checked={this.state.locked}
@@ -529,6 +529,7 @@ class Dashboard extends Component {
         </div>
 
         <DashboardButtonGroup
+          key={"dashboard-buttons"}
           locked={this.state.locked}
           editing={this.state.editing}
           onEdit={this.startEditing.bind(this)}
@@ -545,9 +546,10 @@ class Dashboard extends Component {
         />
       </div>
 
-      <div className="box box-content" onContextMenu={(e) => e.preventDefault()}>
+      <div key={"dashboard-area"} className="box box-content" onContextMenu={(e) => e.preventDefault()}>
         {this.state.editing &&
           <WidgetToolbox
+            key={"widget-toolbox"}
             grid={grid}
             onGridChange={this.setGrid.bind(this)}
             dashboard={this.state.dashboard}
@@ -556,6 +558,7 @@ class Dashboard extends Component {
         }
 
         <WidgetArea
+          key={"widget-area"}
           widgets={this.state.widgets}
           editing={this.state.editing}
           dropZoneHeight={dropZoneHeight}
@@ -564,10 +567,10 @@ class Dashboard extends Component {
         >
           {this.state.widgets != null && Object.keys(this.state.widgets).map(widgetKey => (
 
-            <div >
+            <div key={"widget-container-wrapper" + widgetKey}>
               <WidgetContainer
                 widget={this.state.widgets[widgetKey]}
-                key={widgetKey}
+                key={"widget-container" + widgetKey}
                 index={parseInt(widgetKey, 10)}
                 grid={grid}
                 onWidgetChange={this.widgetChange.bind(this)}
@@ -579,7 +582,7 @@ class Dashboard extends Component {
                 onChange={this.widgetChange.bind(this)}
               >
                 <Widget
-                  key={widgetKey}
+                  key={"widget" + widgetKey}
                   data={this.state.widgets[widgetKey]}
                   onWidgetChange={this.widgetChange.bind(this)}
                   editing={this.state.editing}
@@ -594,6 +597,7 @@ class Dashboard extends Component {
         </WidgetArea>
 
         <EditWidget
+          key={"edit-widget"}
           sessionToken={this.state.sessionToken}
           show={this.state.editModal}
           onClose={this.closeEdit.bind(this)}
@@ -604,6 +608,7 @@ class Dashboard extends Component {
         />
 
         <EditFilesDialog
+          key={"edit-files-dialog"}
           sessionToken={this.state.sessionToken}
           show={this.state.filesEditModal}
           onClose={this.closeEditFiles.bind(this)}
@@ -614,6 +619,7 @@ class Dashboard extends Component {
         />
 
         <EditSignalMappingDialog
+          key={"edit-signal-mapping-output-dialog"}
           show={this.state.editOutputSignalsModal}
           onCloseEdit={(direction) => this.closeEditSignalsModal(direction)}
           direction="Output"
@@ -623,6 +629,7 @@ class Dashboard extends Component {
           sessionToken={this.state.sessionToken}
         />
         <EditSignalMappingDialog
+          key={"edit-signal-mapping-input-dialog"}
           show={this.state.editInputSignalsModal}
           onCloseEdit={(direction) => this.closeEditSignalsModal(direction)}
           direction="Input"
diff --git a/src/widget/widget-container.js b/src/widget/widget-container.js
index 77efc3c..2f84fb1 100644
--- a/src/widget/widget-container.js
+++ b/src/widget/widget-container.js
@@ -95,18 +95,19 @@ class WidgetContainer extends React.Component {
   render() {
 
     const widget = this.props.widget;
-    let contextMenu = (<WidgetContextMenu
-      key={this.props.key}
-      index={this.props.index}
-      widget={this.props.widget}
-      onEdit={this.props.onEdit}
-      onDuplicate={this.props.onDuplicate}
-      onDelete={this.props.onDelete}
-      onChange={this.props.onChange}
+    let contextMenu = (
+      <WidgetContextMenu
+        key={"widget-context-menu"+this.props.index}
+        index={this.props.index}
+        widget={this.props.widget}
+        onEdit={this.props.onEdit}
+        onDuplicate={this.props.onDuplicate}
+        onDelete={this.props.onDelete}
+        onChange={this.props.onChange}
 
-      onWidgetChange={this.props.onWidgetChange}
-      editing={this.props.editing}
-      paused={this.props.paused}
+        onWidgetChange={this.props.onWidgetChange}
+        editing={this.props.editing}
+        paused={this.props.paused}
     />)
 
     if ( !this.props.editing ){
@@ -148,8 +149,9 @@ class WidgetContainer extends React.Component {
       'locked': widget.isLocked
     });
 
-    return ( <div className='widget'  onContextMenu={(e) => this.showMenu(e, this.props.index, this.props.editing)}>
+    return ( <div key={"widget-rnd-context" + this.props.index} className='widget'  onContextMenu={(e) => this.showMenu(e, this.props.index, this.props.editing)}>
       <Rnd
+        key={"widget-rnd" + this.props.index}
         ref={c => { this.rnd = c; }}
         size={{width: Number(widget.width), height: Number(widget.height)}}
         position={{x: Number(widget.x), y: Number(widget.y),}}