Proof Of Concept

example/src/App.js

@@ -19,7 +19,7 @@ const getGQL = (url=shopUrl + 'graphql', headers={}) =>
                           })
         .then(res => res.json())
 
-const Image = ({image:{url}}) => <img src={`${shopUrl}${url}`} />
+const Image = ({src}) => <img src={`${shopUrl}${src}`} />
 
 const Good = ({good, children}) =>
 good ? 
@@ -37,6 +37,18 @@ const Category = ({category:{name, _id}, children}) =>
     {children}
 </div>
 
+const Categories = ({children}) => 
+<div style={{border: '2px solid', paddingLeft: '20px'}}>
+    <h1>categories</h1>
+    {children}
+</div>
+
+const Goods = ({children}) => 
+<div style={{border: '2px solid blue', paddingLeft: '10px'}}>
+    <h2>goods</h2>
+    {children}
+</div>
+
 const MetaTest = () => {
     const [data, setData] = useState()
 
@@ -62,15 +74,20 @@ const MetaTest = () => {
 
     return (
         <MetaPlate data={data}>
-            <Category prop="category" keyDataKey="_id">
-                <Good sourceDataKey="goods" prop="good" keyDataKey="_id">
-                    <div sourceDataKey="images">
-                    <Image  prop="image" keyDataKey="_id"/>
-                    </div>
-                </Good>
-                <Category sourceDataKey="subCategories" prop="category" keyDataKey="_id">
+            <Categories>
+                <Category prop="category" keyDataKey="_id">
+                    <Goods sourceDataKey="goods"> 
+                        <Good prop="good" keyDataKey="_id">
+                            <div sourceDataKey="images">
+                                <Image prop="src" sourceDataKey="url" />
+                            </div>
+                        </Good>
+                    </Goods>
+                    <Categories sourceDataKey="subCategories" >
+                        <Category prop="category" keyDataKey="_id" />
+                    </Categories>
                 </Category>
-            </Category>
+            </Categories>
         </MetaPlate>)
 }
 

src/index.js

@@ -26,7 +26,7 @@ export const MetaPlate = ({ data, children }) => {
               const d = sourceDataKey ? data[sourceDataKey] : data
               if (!d) return <></>
               if (d instanceof Array) return build(d, m)
-              return <Render {...buildProps(data, m)} children={build(d, m.props.children)} />
+              return <Render {...buildProps(d, m)} children={build(d, m.props.children)} />
           })
       }
   }