Remove state from components/ReadFileDropContainer

components/ReadFileDropContainer.js

@@ -14,51 +14,30 @@ const spec = {
 
 const collect = (connect, monitor) => ({ connectDropTarget: connect.dropTarget(), isOver: monitor.isOver() })
 
-class ReadFileDropContainer extends React.Component {
+const ReadFileDropContainer = props => props.connectDropTarget(
-  constructor(props) {
+  <div className="dnd-container">
-    super(props)
+    { props.isOver ? <div className="dnd-overlay">Drop your file here to import</div> : null }
-    this.state = { isFileOver: false }
+    {props.children}
-  }
+    <style jsx>{`
-
+      .dnd-container {
-  componentWillReceiveProps(nextProps) {
+        position: relative;
-    if (!this.props.isOver && nextProps.isOver) {
+      }
-      this.setState({ isFileOver: true })
+
-    }
+      .dnd-overlay {
-
+        display: flex;
-    if (this.props.isOver && !nextProps.isOver) {
+        align-items: center;
-      this.setState({ isFileOver: false })
+        justify-content: center;
-    }
+        text-align: center;
-  }
+        width: 100%;
-
+        height: 100%;
-  render() {
+        z-index: 999;
-    const content = (
+        position: absolute;
-      <div className="dnd-container">
+        top: 0;
-        { this.state.isFileOver ? <div className="dnd-overlay">Drop your file here to import</div> : null }
+        left: 0;
-        { this.props.children }
+        background: rgba(0, 0, 0, 0.85);
-        <style jsx>{`
+      }
-          .dnd-container {
+    `}</style>
-            position: relative;
+  </div>
-          }
+)
-
-          .dnd-overlay {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            text-align: center;
-            width: 100%;
-            height: 100%;
-            z-index: 999;
-            position: absolute;
-            top: 0;
-            left: 0;
-            background: rgba(0, 0, 0, 0.85);
-          }
-        `}</style>
-      </div>
-    )
-
-    return this.props.connectDropTarget(content)
-  }
-}
 
 export default DropTarget(NativeTypes.FILE, spec, collect)(ReadFileDropContainer)