From 4e445aa523c7f6154a8b5100a0b899546b9f1779 Mon Sep 17 00:00:00 2001
From: Adam Putinski <adam.putinski@gmail.com>
Date: Thu, 17 Dec 2015 09:30:54 -0500
Subject: [PATCH] Fix React errors

---
 .../page/component/table-yaml/index.jsx       | 57 +++++++------------
 1 file changed, 21 insertions(+), 36 deletions(-)

diff --git a/app_modules/site/components/page/component/table-yaml/index.jsx b/app_modules/site/components/page/component/table-yaml/index.jsx
index 7b4b5f2a1f..82e4b647cd 100644
--- a/app_modules/site/components/page/component/table-yaml/index.jsx
+++ b/app_modules/site/components/page/component/table-yaml/index.jsx
@@ -17,42 +17,24 @@ import g from 'app_modules/global';
 
 class TableYAML extends React.Component {
 
-  getRows() {
-    const { data } = this.props;
-
-    return (data.classes || []).map((d, dIndex) => {
+  renderRows() {
+    let classes = this.props.data.classes || [];
+    return classes.map((d, index) => {
       let sanitizedClass = d.class.replace(/\W/g, '');
-      let required = null;
-      let notes = null;
-      let deprecated = null;
-
-      if (d.required) {
-        required = [
-          <p>
-            <SvgIcon key={`required-${dIndex}-icon`} className={pf('icon icon--x-small icon-text-default')} sprite="utility" symbol="check" />
-            <span key={`required-${dIndex}-asst`} className={pf('assistive-text')}>Required</span>
+      let required = d.required
+        ? <p>
+            <SvgIcon key={`required-${index}-icon`} className={pf('icon icon--x-small icon-text-default')} sprite="utility" symbol="check" />
+            <span key={`required-${index}-asst`} className={pf('assistive-text')}>Required</span>
           </p>
-        ];
-      } else {
-        required = [
-          <p>No, optional element or modifier</p>
-        ];
-      }
-      if (d.notes) {
-        notes = [
-          <p dangerouslySetInnerHTML={{__html: d.notes}} />
-        ];
-      } else {
-        notes = [
-          <p>--</p>
-        ];
-      }
-      if (d.deprecated) {
-        deprecated = [
-          <span className={pf('badge shrink-none align-middle badge--deprecated')}>Deprecated</span>
-        ];
-      }
-      return <tr key={`tableyaml-${sanitizedClass}-${dIndex}`}>
+        : <p>No, optional element or modifier</p>;
+      let notes = d.notes
+        ? <p dangerouslySetInnerHTML={{__html: d.notes}} />
+        : <p>--</p>;
+      let deprecated = d.deprecated
+        ? <span className={pf('badge shrink-none align-middle badge--deprecated')}>Deprecated</span>
+        : null;
+      return (
+        <tr key={`tableyaml-${sanitizedClass}-${index}`}>
           <th className={pf('cell-shrink align-top')} scope="row">
             <CodeClass className={d.class} />
             <div>
@@ -71,7 +53,8 @@ class TableYAML extends React.Component {
             <strong>Comments:</strong>
             {notes}
           </td>
-        </tr>;
+        </tr>
+      );
     });
   }
 
@@ -90,7 +73,9 @@ class TableYAML extends React.Component {
               <th colSpan="2" className={pf('theme--shade')}>Usage</th>
             </tr>
           </thead>
-          {this.getRows()}
+          <tbody>
+            {this.renderRows()}
+          </tbody>
         </table>
       </div>
     </div>;