From 24496bbf3f295f3b05232c9afebe350d36b882fa Mon Sep 17 00:00:00 2001
From: uwap <me@uwap.name>
Date: Tue, 10 Jul 2018 18:51:05 +0200
Subject: [PATCH] Fix PropType warnings

---
 src/components/SideBar.js          | 10 ++++----
 src/components/UiItemList/index.js | 37 +++++++++++++++++++-----------
 2 files changed, 28 insertions(+), 19 deletions(-)

diff --git a/src/components/SideBar.js b/src/components/SideBar.js
index 869b55e..ee45c08 100644
--- a/src/components/SideBar.js
+++ b/src/components/SideBar.js
@@ -50,16 +50,16 @@ class SideBar extends React.PureComponent<Props, SideBarState> {
     return (
       <Drawer open={this.props.open}
         anchor="right"
-        onRequestClose={this.close}
+        onClose={this.close}
         classes={{paper: this.props.classes.drawerPaper}}
         variant="persistent"
       >
         <AppBar position="static">
           <Toolbar>
-            {this.props.icon == null
-              || renderIcon(this.props.icon, "mdi-36px")}
+            <span>{this.props.icon == null
+              || renderIcon(this.props.icon, "mdi-36px")}</span>
             <Typography variant="title" className={this.props.classes.flex}>
-              {this.props.control == null || this.props.control.name}
+              {this.props.control == null ? "" : this.props.control.name}
             </Typography>
             <IconButton onClick={this.close.bind(this)}>
               <i className="mdi mdi-close mdi-36px"></i>
@@ -67,7 +67,7 @@ class SideBar extends React.PureComponent<Props, SideBarState> {
           </Toolbar>
         </AppBar>
         <List id="drawer_uiComponents">
-          {this.props.children}
+          <React.Fragment>{this.props.children}</React.Fragment>
         </List>
       </Drawer>
     );
diff --git a/src/components/UiItemList/index.js b/src/components/UiItemList/index.js
index 3214361..cdfda90 100644
--- a/src/components/UiItemList/index.js
+++ b/src/components/UiItemList/index.js
@@ -28,56 +28,65 @@ export default class UiItemList extends React.PureComponent<UiItemListProps> {
         );
       }
       if (control.type === "section") {
-        return this.renderControl(control);
+        return this.renderControl(control, key.toString());
       }
       return (
         <ListItem key={key}>
-          {control.icon == null || control.type === "link" ||
-            <ListItemIcon>
-              {renderIcon(control.icon(this.props.state), "mdi-24px")}
-            </ListItemIcon>}
-          {this.renderControl(control)}
+          <React.Fragment>
+            {control.icon == null || control.type === "link" ||
+              <ListItemIcon key={`${key.toString()}-liicon`}>
+                {renderIcon(control.icon(this.props.state), "mdi-24px")}
+              </ListItemIcon>}
+            {this.renderControl(control, key.toString())}
+          </React.Fragment>
         </ListItem>
       );
     });
   }
 
-  renderControl(control: ControlUI) {
+  renderControl(control: ControlUI, key: string) {
     switch (control.type) {
     case "toggle": {
       return <Toggle item={control}
         state={this.props.state}
-        onChangeState={this.props.onChangeState} />;
+        onChangeState={this.props.onChangeState}
+        key={`${key}-licontrol`} />;
     }
     case "dropDown": {
       return <DropDown item={control}
         state={this.props.state}
-        onChangeState={this.props.onChangeState} />;
+        onChangeState={this.props.onChangeState}
+        key={`${key}-licontrol`} />;
     }
     case "section": {
       return <Section item={control}
         state={this.props.state}
-        onChangeState={this.props.onChangeState} />;
+        onChangeState={this.props.onChangeState}
+        key={`${key}-licontrol`} />;
     }
     case "link": {
       return <Link item={control}
         state={this.props.state}
-        onChangeState={this.props.onChangeState} />;
+        onChangeState={this.props.onChangeState}
+        key={`${key}-licontrol`} />;
     }
     case "slider": {
       return <Slider item={control}
         state={this.props.state}
-        onChangeState={this.props.onChangeState} />;
+        onChangeState={this.props.onChangeState}
+        key={`${key}-licontrol`} />;
     }
     case "text": {
       return <Text item={control}
         state={this.props.state}
-        onChangeState={this.props.onChangeState} />;
+        onChangeState={this.props.onChangeState}
+        key={`${key}-licontrol`} />;
     }
     case "progress": {
       return <Progress item={control}
         state={this.props.state}
-        onChangeState={this.props.onChangeState} />;
+        onChangeState={this.props.onChangeState}
+        key={`${key}-licontrol`} />;
     }
     default: {
       throw new Error(