Added a better demo displaying how our app communicates with Flamelink Schemas and displays schema details in the right order.

src/components/Flamelink.js

@@ -1,14 +1,31 @@
-import { Component } from 'react';
+import React, { Component, Fragment } from 'react';
+import Grid from '@material-ui/core/Grid';
 import flamelinkApp from '../flamelink.js';
-
+import Layout from './Layout';
 class Flamelink extends Component {
+    constructor() {
+        super();
+
+        this.state = {
+          schemaDetails: ''
+        }
+      }
+
+    componentDidMount() {
+        // fetch the project name, once it retrieves resolve the promsie and update the state. 
+        flamelinkApp.schemas.getFields('martenSchemaDemo', { fields: [ 'title', 'key' ] })
+        .then(result => this.setState({
+          schemaDetails: result
+        }))
+      }
+
     render() {
 
-        //Grabs data from text field in entry from the martenSchemaDemo
-        flamelinkApp.content.get('martenSchemaDemo')
-        .then(flameData => document.getElementById("flamelinkDemo").innerHTML = flameData.field_1538162314419);
-        
-        return(null);
+        return(
+            <Fragment>
+                <Layout schemaDetails = {this.state.schemaDetails}/>
+            </Fragment>
+        );
     }
 }
 

src/components/Layout.js

@@ -0,0 +1,49 @@
+import React, { Component, Fragment } from 'react';
+import flamelinkApp from '../flamelink.js';
+
+class Layout extends Component {
+        constructor() {
+            super();
+
+            this.state = {
+              contentDetails: ''
+            }
+          }
+
+
+    getData(schemaData){
+        for (var val in this.props.schemaDetails){
+             this.getMoreData(this.props.schemaDetails[val]);
+        }
+    }
+
+    getMoreData(moreData){
+        var tArray = document.createElement("H1");
+        var kArray = document.createElement("P");
+        this.getTitle(moreData.title, tArray);
+        this.getKey(moreData.key, kArray);
+    }
+
+    getTitle(title, arr){
+       var t = document.createTextNode(title);
+       arr.appendChild(t);
+       document.getElementById("demo").appendChild(arr);
+    }
+
+
+    getKey(key, arr){
+       var k = document.createTextNode(key); 
+       arr.appendChild(k);
+       document.getElementById("demo").appendChild(arr); 
+    }
+
+    render() {
+        return(
+            <div>
+                <p id="demo">{this.getData(this.props)}</p>
+            </div>
+        );
+    }
+}
+
+export default Layout;

src/pages/Info.js

@@ -2,16 +2,17 @@ import React, { Component } from 'react';
 import Typography from '@material-ui/core/Typography';
 import Flamelink from '../components/Flamelink';
 
+
 class Info extends Component {
     render() {
         
         return (
             <div>
-                <Flamelink flamelinkApp={this.props.flamelinkApp}/>
+                
                 <Typography variant='display1' align='center' gutterBottom>
                     Info
                 </Typography>
-                <p id="flamelinkDemo"></p>
+                <Flamelink/>
           
             </div>
         );