Refactor GridFieldComponent render method

- Splits render out into logical methods
- Fixes missing key props issue for table header palceholder

admin/client/src/components/GridField/GridField.js

@@ -40,75 +40,75 @@ class GridField extends SilverStripeComponent {
   }
 
   render() {
-    const records = this.props.records;
+    if (!this.props.records) {
-    const handleDrillDown = this.props.data.handleDrillDown;
-
-    if (!records) {
       return <div></div>;
     }
 
-    const columns = this.props.data.columns;
-
     // Placeholder to align the headers correctly with the content
-    const actionPlaceholder = <th className={'grid-field__action-placeholder'} ></th>;
+    const actionPlaceholder = <th key="holder" className={'grid-field__action-placeholder'}></th>;
-    const headerCells = columns.map((column, i) =>
+    const headerCells = this.props.data.columns.map((column) =>
-      <GridFieldHeaderCell key={i}>{column.name}</GridFieldHeaderCell>
+      <GridFieldHeaderCell key={`${column.name}`}>{column.name}</GridFieldHeaderCell>
     );
     const header = <GridFieldHeader>{headerCells.concat(actionPlaceholder)}</GridFieldHeader>;
-
+    const rows = Object.keys(this.props.records).map((key) =>
-    const rows = Object.keys(records).map((i) => {
+      this.createRow(this.props.records[key])
-      const record = records[i];
+    );
-      // Build cells
-      const cells = columns.map((column, j) => {
-        // Get value by dot notation
-        const val = column.field.split('.').reduce((a, b) => a[b], record);
-        const cellProps = {
-          handleDrillDown: handleDrillDown ? (event) => handleDrillDown(event, record) : null,
-          className: handleDrillDown ? 'grid-field__cell--drillable' : '',
-          key: j,
-          width: column.width,
-        };
-        return (
-          <GridFieldCell {...cellProps}>
-            {val}
-          </GridFieldCell>
-        );
-      });
-
-      const rowActions = (
-        <GridFieldCell key={`${i}-actions`}>
-          <GridFieldAction
-            icon={'cog'}
-            handleClick={this.editRecord}
-            key={`action-${i}-edit`}
-            record={record}
-          />
-          <GridFieldAction
-            icon={'cancel'}
-            handleClick={this.deleteRecord}
-            key={`action-${i}-delete`}
-            record={record}
-          />
-        </GridFieldCell>
-      );
-
-      const rowProps = {
-        key: i,
-        className: handleDrillDown ? 'grid-field__row--drillable' : '',
-      };
-
-      return (
-        <GridFieldRow {...rowProps}>
-          {cells.concat(rowActions)}
-        </GridFieldRow>
-      );
-    });
 
     return (
       <GridFieldTable header={header} rows={rows} />
     );
   }
 
+  createRowActions(record) {
+    return (
+      <GridFieldCell key="Actions">
+        <GridFieldAction
+          icon={'cog'}
+          handleClick={this.editRecord}
+          record={record}
+        />
+        <GridFieldAction
+          icon={'cancel'}
+          handleClick={this.deleteRecord}
+          record={record}
+        />
+      </GridFieldCell>
+    );
+  }
+
+  createCell(record, column) {
+    const handleDrillDown = this.props.data.handleDrillDown;
+    const cellProps = {
+      className: handleDrillDown ? 'grid-field__cell--drillable' : '',
+      handleDrillDown: handleDrillDown ? (event) => handleDrillDown(event, record) : null,
+      key: `${column.name}`,
+      width: column.width,
+    };
+    const val = column.field.split('.').reduce((a, b) => a[b], record);
+
+    return <GridFieldCell {...cellProps}>{val}</GridFieldCell>;
+  }
+
+  /**
+   * Create a row components for the passed record.
+   */
+  createRow(record) {
+    const rowProps = {
+      className: this.props.data.handleDrillDown ? 'grid-field__row--drillable' : '',
+      key: `${record.ID}`,
+    };
+    const cells = this.props.data.columns.map((column) =>
+      this.createCell(record, column)
+    );
+    const rowActions = this.createRowActions(record);
+
+    return (
+      <GridFieldRow {...rowProps}>
+        {cells.concat(rowActions)}
+      </GridFieldRow>
+    );
+  }
+
   /**
    * @param object event
    * @param number id
@@ -153,7 +153,7 @@ GridField.propTypes = {
 function mapStateToProps(state, ownProps) {
   const recordType = ownProps.data ? ownProps.data.recordType : null;
   return {
-    records: (state.records && recordType) ? state.records[recordType] : {},
+    records: recordType && state.records[recordType] ? state.records[recordType] : {},
   };
 }
 

admin/client/src/components/GridField/GridFieldCell.js

@@ -9,8 +9,14 @@ class GridFieldCell extends SilverStripeComponent {
   }
 
   render() {
+    const classNames = ['grid-field__cell'];
+
+    if (typeof this.props.className !== 'undefined') {
+      classNames.push(this.props.className);
+    }
+
     const props = {
-      className: `grid-field__cell ${this.props.className}`,
+      className: classNames.join(' '),
       onClick: this.handleDrillDown,
     };