ES6 assets/js/src/form/fields/selection.jsx

assets/js/src/form/fields/selection.jsx

@@ -1,17 +1,10 @@
-define([
-  'react',
-  'react-dom',
-  'jquery',
-  'underscore',
-  'select2',
-],
-(
-  React,
-  ReactDOM,
-  jQuery,
-  _
-) => {
-  const Selection = React.createClass({
+import React from 'react';
+import jQuery from 'jquery';
+import _ from 'underscore';
+import 'react-dom';
+import 'select2';
+
+const Selection = React.createClass({
   allowMultipleValues: function allowMultipleValues() {
     return (this.props.field.multiple === true);
   },
@@ -230,14 +223,14 @@ define([
   render: function render() {
     const items = this.getItems(this.props.field);
     const selectedValues = this.getSelectedValues();
-      const options = items.map((item, index) => {
+    const options = items.map((item) => {
       const label = this.getLabel(item);
       const searchLabel = this.getSearchLabel(item);
       const value = this.getValue(item);
 
       return (
         <option
-            key={`option-${index}`}
+          key={`option-${item.id}`}
           className="default"
           value={value}
           title={searchLabel}
@@ -263,7 +256,6 @@ define([
       </select>
     );
   },
-  });
-
-  return Selection;
 });
+
+export default Selection;