Re-written Preview as a functional component. It also re-uses widgetFor prop to get widgets.

src/components/PreviewPane/Preview.js

@@ -1,39 +1,21 @@
 import React, { PropTypes } from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
-import { resolveWidget } from '../Widgets';
 
-export default class Preview extends React.Component {
+export default function Preview({ collection, widgetFor }) {
-
-  previewFor(field) {
-    const { entry, getMedia } = this.props;
-    const widget = resolveWidget(field.get('widget'));
-    return React.createElement(widget.preview, {
-      field: field,
-      value: entry.getIn(['data', field.get('name')]),
-      getMedia: getMedia,
-    });
-  }
-
-  render() {
-    const { collection } = this.props;
   if (!collection) {
     return null;
   }
 
-    return <div>
+  return (
-      {
+    <div>
-        collection.get('fields').map(field => (
+      {collection.get('fields').map(field => widgetFor(field.get('name')))}
-          <div key={field.get('name')}>
-            {this.previewFor(field)}
     </div>
-        ))
+  );
-      }
-    </div>;
-  }
 }
 
 Preview.propTypes = {
   collection: ImmutablePropTypes.map.isRequired,
   entry: ImmutablePropTypes.map.isRequired,
   getMedia: PropTypes.func.isRequired,
+  widgetFor: PropTypes.func.isRequired,
 };

src/components/PreviewPane/PreviewPane.js

@@ -25,9 +25,10 @@ export default class PreviewPane extends React.Component {
     const field = collection.get('fields').find((field) => field.get('name') === name);
     const widget = resolveWidget(field.get('widget'));
     return React.createElement(widget.preview, {
-      field: field,
+      key: field.get('name'),
       value: entry.getIn(['data', field.get('name')]),
-      getMedia: getMedia,
+      field,
+      getMedia,
     });
   }