From 0ef77e24b0d7bdcd6fbc3f13612e11cb02d7fff4 Mon Sep 17 00:00:00 2001
From: HuyDD <37580530+huydod@users.noreply.github.com>
Date: Mon, 28 Oct 2019 17:55:02 +0700
Subject: [PATCH] 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
---
 .../@uppy/provider-views/src/Breadcrumbs.js   | 37 ++++++++++---------
 1 file changed, 20 insertions(+), 17 deletions(-)

diff --git a/packages/@uppy/provider-views/src/Breadcrumbs.js b/packages/@uppy/provider-views/src/Breadcrumbs.js
index e2d7dbe6b..119099db1 100644
--- a/packages/@uppy/provider-views/src/Breadcrumbs.js
+++ b/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>