Modify how data is passed to UIPage

client/homebrew/pages/accountPage/accountPage.jsx

@@ -43,26 +43,28 @@ const AccountPage = createClass({
 
 	renderUiItems : function() {
 		// console.log(this.props.uiItems);
-		return [
-			<>
+		return 	<>
+			<div className='dataGroup'>
 				<h1>Account Information  <i className='fas fa-user'></i></h1>
 				<p><strong>Username: </strong> {this.props.uiItems.username || 'No user currently logged in'}</p>
 				<p><strong>Last Login: </strong> {moment(this.props.uiItems.issued).format('dddd, MMMM Do YYYY, h:mm:ss a ZZ') || '-'}</p>
-			</>,
-			<>
+			</div>
+			<div className='dataGroup'>
 				<h3>Homebrewery Information <NaturalCritIcon /></h3>
 				<p><strong>Brews on Homebrewery: </strong> {this.props.uiItems.mongoCount || '-'}</p>
-			</>,
-			<>
+			</div>
+			<div className='dataGroup'>
 				<h3>Google Information <i className='fab fa-google-drive'></i></h3>
 				<p><strong>Linked to Google: </strong> {this.props.uiItems.googleId ? 'YES' : 'NO'}</p>
 				{this.props.uiItems.googleId ? <p><strong>Brews on Google Drive: </strong> {this.props.uiItems.fileCount || '-'}</p> : '' }
-			</>
-		];
+			</div>
+		</>;
 	},
 
 	render : function(){
-		return <UIPage brew={this.props.brew} renderUiItems={this.renderUiItems} ></UIPage>;
+		return <UIPage brew={this.props.brew}>
+			{this.renderUiItems()}
+		</UIPage>;
 	}
 });
 

client/homebrew/pages/basePages/uiPage/uiPage.jsx

@@ -13,20 +13,6 @@ const Account = require('../../../navbar/account.navitem.jsx');
 const UIPage = createClass({
 	displayName : 'UIPage',
 
-	getDefaultProps : function(){
-		return {
-			renderUiItems : ()=>{
-				return <>
-					<h1>H1 Header</h1>
-					<h2>H2 Header</h2>
-					<h3>H3 Header</h3>
-					<h4>H4 Header</h4>
-					<p>This is some test text.</p>
-				</>;
-			}
-		};
-	},
-
 	render : function(){
 		return <div className='uiPage sitePage'>
 			<Navbar>
@@ -43,11 +29,7 @@ const UIPage = createClass({
 			</Navbar>
 
 			<div className='content'>
-				{this.props.renderUiItems().map((item, index)=>{
-					return <div className='dataGroup' key={index}>
-						{item}
-					</div>;
-				})}
+				{this.props.children}
 			</div>
 		</div>;
 	}