Create iteration mapper collectionList for CollectionAccessible

src/pods/canvas/components/canvas-accessible/components/collection-accessible.component.tsx

@@ -1,8 +1,13 @@
 import React from 'react';
+import { TableVm } from '@/core/providers';
 
-export const CollectionAccessible: React.FC = () => {
+interface Props {
+  table: TableVm;
+}
+export const CollectionAccessible: React.FC<Props> = props => {
   //Todo: #388 Canvas Accessible-collection(https://github.com/Lemoncode/mongo-modeler/issues/388)
   //Todo: #389 Canvas Accessible-iterate over fields(https://github.com/Lemoncode/mongo-modeler/issues/389)
+  console.log(props.table);
 
   return (
     <>

src/pods/canvas/components/canvas-accessible/components/collection-list-accessible.component.tsx

@@ -5,16 +5,17 @@ import { TableVm } from '@/core/providers';
 interface Props {
   collectionList: TableVm[];
 }
+
 export const CollectionListAccessible: React.FC<Props> = props => {
   const { collectionList } = props;
-  // Todo: #379Canvas Accessible-Iterate over collections (https://github.com/Lemoncode/mongo-modeler/issues/379)
 
   return (
     <>
       <h2>Collections</h2>
-      {/* Delete the collectionList[0].id, this is just to avoid typescript errors */}
-      {collectionList[0].id}
-      <CollectionAccessible />
+
+      {collectionList.map(table => (
+        <CollectionAccessible table={table} />
+      ))}
 
       {/* Code bellow only is just an example. We need do it mapping the real data
       and with TableAccessible component. IMPORTANT: we don't need divs!*/}