Update snippets

snippets/FileDrop.md

@@ -1,18 +1,16 @@
 ---
 title: FileDrop
-tags: components,input,state,effect,event,intermediate
+tags: components,input,state,effect,event,advanced
 ---
 
 Renders a file drag and drop component for a single file.
 
-- Create a ref called `dropRef` for this component.
-- Use the `React.useState()` hook to create the `drag` and `filename` variables, initialized to `false` and `''` respectively.
-  The variables `dragCounter` and `drag` are used to determine if a file is being dragged, while `filename` is used to store the dropped file's name.
-- Create the `handleDrag`, `handleDragIn`, `handleDragOut` and `handleDrop` methods to handle drag and drop functionality, bind them to the component's context.
-- Each of the methods will handle a specific event, the listeners for which are created and removed in the `React.useEffect()` hook and its attached `cleanup()` method.
+- Create a ref, called `dropRef` and bind it to the component's wrapper.
+- Use the `useState()` hook to create the `drag` and `filename` variables, initialized to `false` and `''` respectively.
+- The variables `dragCounter` and `drag` are used to determine if a file is being dragged, while `filename` is used to store the dropped file's name.
+- Create the `handleDrag`, `handleDragIn`, `handleDragOut` and `handleDrop` methods to handle drag and drop functionality.
 - `handleDrag` prevents the browser from opening the dragged file, `handleDragIn` and `handleDragOut` handle the dragged file entering and exiting the component, while `handleDrop` handles the file being dropped and passes it to `onDrop`.
-- Return an appropriately styled `<div>` and use `drag` and `filename` to determine its contents and style.
-- Finally, bind the `ref` of the created `<div>` to `dropRef`.
+- Use the `useEffect()` hook to handle each of the drag and drop events using the previously created methods.
 
 ```css
 .filedrop {
@@ -77,7 +75,7 @@ const FileDrop = ({ onDrop }) => {
     div.addEventListener('dragleave', handleDragOut);
     div.addEventListener('dragover', handleDrag);
     div.addEventListener('drop', handleDrop);
-    return function cleanup() {
+    return () => {
       div.removeEventListener('dragenter', handleDragIn);
       div.removeEventListener('dragleave', handleDragOut);
       div.removeEventListener('dragover', handleDrag);
@@ -88,14 +86,19 @@ const FileDrop = ({ onDrop }) => {
   return (
     <div
       ref={dropRef}
-      className={drag ? 'filedrop drag' : filename ? 'filedrop ready' : 'filedrop'}
+      className={
+        drag ? 'filedrop drag' : filename ? 'filedrop ready' : 'filedrop'
+      }
     >
-      {filename && !drag ? <div>{filename}</div> : <div>Drop files here!</div>}
+      {filename && !drag ? <div>{filename}</div> : <div>Drop a file here!</div>}
     </div>
   );
 };
 ```
 
 ```jsx
-ReactDOM.render(<FileDrop onDrop={console.log} />, document.getElementById('root'));
+ReactDOM.render(
+  <FileDrop onDrop={console.log} />,
+  document.getElementById('root')
+);
 ```