diff --git a/src/editor/widgets/comment/PurposeDropdown.jsx b/src/editor/widgets/comment/PurposeDropdown.jsx
index 61bb11a..307e39a 100644
--- a/src/editor/widgets/comment/PurposeDropdown.jsx
+++ b/src/editor/widgets/comment/PurposeDropdown.jsx
@@ -1,20 +1,37 @@
-import React, { Component } from 'preact/compat';
+import React from 'preact/compat';
 import Select from 'react-select';
 
-export const purposes = [{'value': 'assessing', 'label': 'Assessing'}, {'value': 'bookmarking', 'label': 'Bookmarking'}, {'value': 'classifying', 'label': 'Classifying'}, {'value': 'commenting', 'label': 'Commenting'}, {'value': 'describing', 'label': 'Describing'},{'value': 'editing', 'label': 'Editing'}, {'value': 'highlighting', 'label': 'Highlighting'},{'value': 'identifying', 'label': 'Identifying'},{'value': 'linking', 'label': 'Linking'},{'value': 'moderating', 'label': 'Moderating'},{'value': 'questioning', 'label': 'Questioning'},{'value': 'replying', 'label': 'Replying'}]
+export const purposes = [
+  {'value': 'assessing', 'label': 'Assessing'}, 
+  {'value': 'bookmarking', 'label': 'Bookmarking'}, 
+  {'value': 'classifying', 'label': 'Classifying'}, 
+  {'value': 'commenting', 'label': 'Commenting'}, 
+  {'value': 'describing', 'label': 'Describing'},
+  {'value': 'editing', 'label': 'Editing'}, 
+  {'value': 'highlighting', 'label': 'Highlighting'},
+  {'value': 'identifying', 'label': 'Identifying'},
+  {'value': 'linking', 'label': 'Linking'},
+  {'value': 'moderating', 'label': 'Moderating'},
+  {'value': 'questioning', 'label': 'Questioning'},
+  {'value': 'replying', 'label': 'Replying'}
+]
 
-export default class PurposeDropdown extends Component {
-  render() {
-    const selectedOption = this.props.content ? {'value': this.props.content, 'label': this.props.content.charAt(0).toUpperCase() + this.props.content.slice(1) } : undefined;
-    return (
-      <div class="r6o-purposedropdown">
-        <Select
-          value={selectedOption}
-          onChange={this.props.onChange}
-          options={purposes}
-          isDisabled={!this.props.editable}
-        />
-      </div>
-    );
-  }
-} 
\ No newline at end of file
+const PurposeDropdown = props => {
+
+  const selectedOption = this.props.content ?
+    { 'value': this.props.content, 'label': this.props.content.charAt(0).toUpperCase() + this.props.content.slice(1) } : undefined;
+
+  return (
+    <div class="r6o-purposedropdown">
+      <Select
+        value={selectedOption}
+        onChange={this.props.onChange}
+        options={purposes}
+        isDisabled={!this.props.editable}
+      />
+    </div>
+  );
+
+}
+
+export default PurposeDropdown;
\ No newline at end of file