--- a/devtools/client/webconsole/new-console-output/components/filter-bar.js
+++ b/devtools/client/webconsole/new-console-output/components/filter-bar.js
@@ -1,15 +1,14 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 "use strict";
 
 const {
-  createFactory,
   createClass,
   DOM: dom,
   PropTypes
 } = require("devtools/client/shared/vendor/react");
 const { connect } = require("devtools/client/shared/vendor/react-redux");
 const { getAllFilters } = require("devtools/client/webconsole/new-console-output/selectors/filters");
 const { getAllUi } = require("devtools/client/webconsole/new-console-output/selectors/ui");
 const {
@@ -17,17 +16,17 @@ const {
   filtersClear,
   filterBarToggle,
   messagesClear
 } = require("devtools/client/webconsole/new-console-output/actions/index");
 const { l10n } = require("devtools/client/webconsole/new-console-output/utils/messages");
 const {
   MESSAGE_LEVEL
 } = require("../constants");
-const FilterButton = createFactory(require("devtools/client/webconsole/new-console-output/components/filter-button"));
+const FilterButton = require("devtools/client/webconsole/new-console-output/components/filter-button");
 
 const FilterBar = createClass({
 
   displayName: "FilterBar",
 
   propTypes: {
     dispatch: PropTypes.func.isRequired,
     filter: PropTypes.object.isRequired,

--- a/devtools/client/webconsole/new-console-output/components/filter-button.js
+++ b/devtools/client/webconsole/new-console-output/components/filter-button.js
@@ -1,47 +1,40 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 "use strict";
 
 const {
-  createClass,
   DOM: dom,
   PropTypes
 } = require("devtools/client/shared/vendor/react");
 const actions = require("devtools/client/webconsole/new-console-output/actions/index");
 
-const FilterButton = createClass({
-
-  displayName: "FilterButton",
+FilterButton.displayName = "FilterButton";
 
-  propTypes: {
-    label: PropTypes.string.isRequired,
-    filterKey: PropTypes.string.isRequired,
-    active: PropTypes.bool.isRequired,
-    dispatch: PropTypes.func.isRequired,
-  },
-
-  onClick: function () {
-    this.props.dispatch(actions.filterToggle(this.props.filterKey));
-  },
+FilterButton.propTypes = {
+  label: PropTypes.string.isRequired,
+  filterKey: PropTypes.string.isRequired,
+  active: PropTypes.bool.isRequired,
+  dispatch: PropTypes.func.isRequired,
+};
 
-  render() {
-    const {active, label, filterKey} = this.props;
+function FilterButton(props) {
+  const {active, label, filterKey, dispatch} = props;
+  let classList = [
+    "devtools-button",
+    filterKey,
+  ];
+  if (active) {
+    classList.push("checked");
+  }
 
-    let classList = [
-      "devtools-button",
-      filterKey,
-    ];
-    if (active) {
-      classList.push("checked");
-    }
-
-    return dom.button({
-      "aria-pressed": active === true,
-      className: classList.join(" "),
-      onClick: this.onClick
-    }, label);
-  }
-});
+  return dom.button({
+    "aria-pressed": active === true,
+    className: classList.join(" "),
+    onClick: () => {
+      dispatch(actions.filterToggle(filterKey));
+    },
+  }, label);
+}
 
 module.exports = FilterButton;