Proof Of Concept fixes

example/src/App.js

@@ -60,11 +60,12 @@ const MetaTest = () => {
                     url
                   }
                 goods{
+                _id
                 name description price images{
                   url
                 }
               }
-                subCategories{ name }
+                subCategories{ name _id}
             }
         }
     `
@@ -77,9 +78,10 @@ const MetaTest = () => {
             <Categories prop='data'>
                 <Category prop="category" keyDataKey="_id">
                     <Goods sourceDataKey="goods"> 
+                        <p sourceDataKey="description"/>
                         <Good prop="good" keyDataKey="_id">
                             <div sourceDataKey="images">
-                                <Image prop="src" sourceDataKey="url" />
+                                <Image prop="src" sourceDataKey="url"/>
                             </div>
                         </Good>
                     </Goods>

src/index.js

@@ -2,30 +2,42 @@ import React, {Fragment} from 'react'
 
 export const MetaPlate = ({ data, children }) => {
   console.log(children, data)
-  const buildProps = (data, {props:{prop, keyDataKey, sourceDataKey}}) => 
-                        ({[prop]: data,
-                            key:  data[keyDataKey]})
+  const buildProps = (data, {props:{prop, keyDataKey, sourceDataKey}}) =>  {
+      let result = {}
+      result[prop || 'children'] = data
+      result.key = data && data[keyDataKey] || sourceDataKey
+
+      return result
+  }
+
   const build = (data, meta) => {
-      if (!meta) return;
-      if (data instanceof Array){
+      if (!meta) return <></>;
+
+      if (data instanceof Array){ //Array of data - container component
           if (meta instanceof Array) meta = meta[0];
           const Render = meta.type
-          if (!meta.props.children) return <Render {...buildProps(data, meta)} />
-          return  (<Render {...buildProps(data, meta)}>
+          const props = buildProps(data, meta)
+          if (!meta.props.children) {
+              return <Render {...props}/>
+          }
+              console.log(props)
+          return  (<Render {...props}>
               {data.map(d => build(d, meta.props.children))}
               </Render>
           )
       }
-      else if (data instanceof Object){
+      else if (data instanceof Object){ //object
           if (!(meta instanceof Array)) meta = [meta]
 
           return meta.map(m => {
               const Render = m.type
               const {sourceDataKey}  = m.props
               const d = sourceDataKey ? data[sourceDataKey] : data
-              if (!d) return <></>
+              const props = buildProps(d, m)
+
+              if (!d) return <Fragment key={props.key} />
               if (d instanceof Array) return build(d, m)
-              return <Render {...buildProps(d, m)} children={build(d, m.props.children)} />
+              return <Render children={build(d, m.props.children)} {...props}/>
           })
       }
   }