DEV Community

Discussion on: How to Create File Dropzone in React and TypeScript

View post
Collapse
 
rkallan profile image
RRKallan •

With react html elements has also attributes onDrop, onDragOver, onDragEnter and onDragLeave.

So you can avoid the use of useRef and the useEffect to add / remove eventListener

the below code

(props: React.PropsWithChildren<FileListProps>) => (
Enter fullscreen mode Exit fullscreen mode

can be written as follow

(props: FileListProps) => (
Enter fullscreen mode Exit fullscreen mode

this will avoid the use of this line

App.displayName = 'App'
Enter fullscreen mode Exit fullscreen mode

The below function

    const mapFileListToArray = (files: FileList) => {
      const array = []

      for (let i = 0; i < files.length; i++) {
        array.push(files.item(i))
      }

      return array
    }
Enter fullscreen mode Exit fullscreen mode

could be written as follow

const mapFileListToArray = (files: FileList) => Array.from(files)
Enter fullscreen mode Exit fullscreen mode

My suggestion for The below code

        {files.length === 0 ? (
          <h3>No files to upload</h3>
        ) : (
          <h3>Files to upload: {files.length}</h3>
        )}
Enter fullscreen mode Exit fullscreen mode

Could be written as follow

     <h3>
        {files?.length ?  `Files to upload: ${files.length}` : "No files to upload"
    </h3>
Enter fullscreen mode Exit fullscreen mode

Also i think the use of memo and useCallback are not necessary.