fix: provider views breadcrumbs is failed to render (#1914)

* fix: provider views's breadcrumbs is failed to render

* fix eslint

* provider-views: use JSX syntax for Breadcrumbs

packages/@uppy/provider-views/src/Breadcrumbs.js

@@ -1,18 +1,20 @@
 const { h } = require('preact')
 
 // TODO use Fragment when upgrading to preact X
-/* eslint-disable react/jsx-key */
-const Breadcrumb = (props) => [
-  <button
-    type="button"
-    class="uppy-u-reset"
-    onclick={props.getFolder}
-  >
-    {props.title}
-  </button>,
-  !props.isLast ? ' / ' : ''
-]
-/* eslint-enable react/jsx-key */
+const Breadcrumb = (props) => {
+  return (
+    <span>
+      <button
+        type="button"
+        class="uppy-u-reset"
+        onclick={props.getFolder}
+      >
+        {props.title}
+      </button>
+      {!props.isLast ? ' / ' : ''}
+    </span>
+  )
+}
 
 module.exports = (props) => {
   return (
@@ -20,11 +22,12 @@ module.exports = (props) => {
       <div class="uppy-Provider-breadcrumbsIcon">{props.breadcrumbsIcon}</div>
       {
         props.directories.map((directory, i) => (
-          Breadcrumb({
-            getFolder: () => props.getFolder(directory.id),
-            title: i === 0 ? props.title : directory.title,
-            isLast: i + 1 === props.directories.length
-          })
+          <Breadcrumb
+            key={directory.id}
+            getFolder={() => props.getFolder(directory.id)}
+            title={i === 0 ? props.title : directory.title}
+            isLast={i + 1 === props.directories.length}
+          />
         ))
       }
     </div>