Fix Category missing key + Fix button cannot be inside button

src/Components/Category/Category.tsx

@@ -12,8 +12,8 @@ export function Category(props: ICategoryProps): JSX.Element {
 
   if (isOpen) {
     return (
-      <button type="button"
-        className='overflow-hidden h-full transition-all'
+      <div
+        className='overflow-hidden h-full transition-all text-center cursor-pointer'
         key={props.category}
         id={props.category}
         title={props.category}
@@ -32,13 +32,13 @@ export function Category(props: ICategoryProps): JSX.Element {
         <div className='transition-all grid gap-2 p-2 bg-slate-400/80 overflow-auto rounded-b-lg visible'>
           { props.children }
         </div>
-      </button>
+      </div>
     );
   }
 
   return (
-    <button type="button"
-      className='overflow-visible h-16 group transition-all'
+    <div
+      className='overflow-visible h-16 group transition-all text-center cursor-pointer'
       key={props.category}
       id={props.category}
       title={props.category}
@@ -55,6 +55,6 @@ export function Category(props: ICategoryProps): JSX.Element {
       <div className='transition-all overflow-hidden rounded-b-lg hidden'>
         { props.children }
       </div>
-    </button>
+    </div>
   );
 }

src/Components/Sidebar/Sidebar.tsx

@@ -1,4 +1,3 @@
-import { ChevronRightIcon } from '@heroicons/react/outline';
 import * as React from 'react';
 import { IAvailableContainer } from '../../Interfaces/IAvailableContainer';
 import { TruncateString } from '../../utils/stringtools';
@@ -23,9 +22,10 @@ export function Sidebar(props: ISidebarProps): JSX.Element {
       return;
     }
 
-    const componentButton = (<button type="button"
-      className='w-full justify-center h-16 transition-all sidebar-component'
+    const componentButton = (<button
       key={componentOption.Type}
+      type="button"
+      className='w-full justify-center h-16 transition-all sidebar-component'
       id={componentOption.Type}
       title={componentOption.Type}
       onClick={() => props.buttonOnClick(componentOption.Type)}
@@ -56,7 +56,10 @@ export function Sidebar(props: ISidebarProps): JSX.Element {
   // build the categories
   categories.forEach((options, category) => {
     rootElements.unshift(
-      <Category category={category}>
+      <Category
+        key={category}
+        category={category}
+      >
         { options }
       </Category>);
   });

test-server/http.js

@@ -99,6 +99,7 @@ const GetSVGLayoutConfiguration = () => {
       },
       {
         Type: 'Remplissage',
+        Category: "Category2",
         CustomSVG: `
           <rect width="{width}" height="{height}" style="{style}"></rect>
           <rect  width="{width}" height="{height}" stroke="black" fill-opacity="0"></rect>