From f05b96cd04e55d1c1f94289c66eab57aade3a8e5 Mon Sep 17 00:00:00 2001
From: Depickere Sven <sven.depickere@hotmail.com>
Date: Mon, 24 Jan 2022 17:52:36 +0100
Subject: [PATCH] refactor(): Update method usage

use regular func as a Component declaration and the arrow func as a handler inside the component.
---
 demo/components/FileInput.tsx | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/demo/components/FileInput.tsx b/demo/components/FileInput.tsx
index a0ead58e..7ea8d6ff 100644
--- a/demo/components/FileInput.tsx
+++ b/demo/components/FileInput.tsx
@@ -1,6 +1,6 @@
 import * as yaml from 'js-yaml';
 import * as React from 'react';
-import { RefObject, useRef } from 'react';
+import { ChangeEvent, RefObject, useRef } from 'react';
 import styled from '../../src/styled-components';
 
 const Button = styled.button`
@@ -23,23 +23,23 @@ const Button = styled.button`
   }
 `;
 
-const FileInput = (props: { onUpload }) => {
+function FileInput(props: { onUpload }) {
   const hiddenFileInput: RefObject<HTMLInputElement> = useRef<HTMLInputElement>(null);
 
-  function handleClick() {
+  const handleClick = () => {
     if (hiddenFileInput && hiddenFileInput.current) {
       hiddenFileInput.current.click();
     }
-  }
+  };
 
-  function uploadFile(event) {
-    const file = event.target.files[0];
+  const uploadFile = (event: ChangeEvent<HTMLInputElement>) => {
+    const file = (event.target as HTMLInputElement).files![0];
     const reader = new FileReader();
     reader.onload = () => {
       props.onUpload(yaml.load(reader.result));
     };
     reader.readAsText(file);
-  }
+  };
 
   return (
     <span>
@@ -47,6 +47,6 @@ const FileInput = (props: { onUpload }) => {
       <input type="file" style={{ display: 'none' }} onChange={uploadFile} ref={hiddenFileInput} />
     </span>
   );
-};
+}
 
 export default FileInput;