docs: fix flash white box (#7877)

dagster-io · May 16, 2022 · 5897837 · 5897837 · vercel · May 16, 2022
1 parent 727c059
commit 5897837
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 8 deletions.
diff --git a/docs/next/components/mdx/MDXRenderer.tsx b/docs/next/components/mdx/MDXRenderer.tsx
@@ -112,7 +112,7 @@ const BreadcrumbNav = () => {
         <ol className="md:inline-flex space-x-1 lg:space-x-3">
           {breadcrumbItems.map((item, index) => {
             return (
-              <li key={item.title}>
+              <li key={item.path || item.title}>
                 <div className="flex flex-nowrap items-center">
                   {index > 0 && (
                     <svg

diff --git a/docs/next/components/mdx/SidebarNavigation.tsx b/docs/next/components/mdx/SidebarNavigation.tsx
@@ -104,12 +104,15 @@ const useActiveId = (itemIds) => {
 
 const MARGINS = ["ml-0", "ml-2", "ml-4", "ml-8"];
 
-const renderItems = (items, activeId, depth) => {
+const renderItems = (items, activeId, depth, key) => {
   return (
-    <ol>
-      {items.map((item) => {
+    <ol key={key}>
+      {items.map((item, idx) => {
         return item.url ? (
-          <li key={item.url} className={cx(MARGINS[depth], "mt-3 list-inside")}>
+          <li
+            key={`${key}-${idx}`}
+            className={cx(MARGINS[depth], "mt-3 list-inside")}
+          >
             <a
               href={item.url}
               className={cx(
@@ -123,10 +126,11 @@ const renderItems = (items, activeId, depth) => {
             >
               {item.title}
             </a>
-            {item.items && renderItems(item.items, activeId, depth + 1)}
+            {item.items &&
+              renderItems(item.items, activeId, depth + 1, `${key}-${idx}`)}
           </li>
         ) : (
-          renderItems(item.items, activeId, depth)
+          renderItems(item.items, activeId, depth, `${key}-${idx}`)
         );
       })}
     </ol>
@@ -139,7 +143,7 @@ const SidebarNavigation = ({ items }) => {
   }
   const idList = getIds(items);
   const activeId = useActiveId(idList);
-  return renderItems(items, activeId, 0);
+  return renderItems(items, activeId, 0, 0);
 };
 
 export default SidebarNavigation;