From d5db67be38c57ce821108a0a27ab98b55ec7a367 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Fri, 6 Sep 2019 18:35:52 +0100
Subject: [PATCH] Switch to createReactClass: views/elements & views/groups.
 React 16 :D

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
 src/components/views/elements/ActionButton.js          |  3 ++-
 src/components/views/elements/AddressSelector.js       |  5 ++---
 src/components/views/elements/AddressTile.js           |  3 ++-
 src/components/views/elements/DeviceVerifyButtons.js   |  3 ++-
 src/components/views/elements/DialogButtons.js         |  3 ++-
 src/components/views/elements/EditableText.js          |  3 ++-
 src/components/views/elements/InlineSpinner.js         |  5 +++--
 .../views/elements/MemberEventListSummary.js           |  3 ++-
 src/components/views/elements/MessageSpinner.js        |  3 ++-
 src/components/views/elements/PersistentApp.js         |  3 ++-
 src/components/views/elements/Pill.js                  |  3 ++-
 src/components/views/elements/PowerSelector.js         |  5 ++---
 src/components/views/elements/ProgressBar.js           |  7 +++----
 src/components/views/elements/SettingsFlag.js          |  3 ++-
 src/components/views/elements/Spinner.js               |  7 +++----
 src/components/views/elements/TagTile.js               |  3 ++-
 src/components/views/elements/TintableSvg.js           | 10 ++++------
 src/components/views/elements/Tooltip.js               |  3 ++-
 src/components/views/elements/TooltipButton.js         |  3 ++-
 src/components/views/elements/TruncatedList.js         |  3 ++-
 src/components/views/elements/UserSelector.js          |  5 ++---
 src/components/views/groups/GroupInviteTile.js         |  3 ++-
 src/components/views/groups/GroupMemberInfo.js         |  5 +++--
 src/components/views/groups/GroupMemberList.js         |  3 ++-
 src/components/views/groups/GroupMemberTile.js         |  3 ++-
 src/components/views/groups/GroupPublicityToggle.js    |  3 ++-
 src/components/views/groups/GroupRoomInfo.js           |  5 +++--
 src/components/views/groups/GroupRoomList.js           |  3 ++-
 src/components/views/groups/GroupRoomTile.js           |  5 +++--
 src/components/views/groups/GroupTile.js               |  3 ++-
 src/components/views/groups/GroupUserSettings.js       |  3 ++-
 31 files changed, 70 insertions(+), 52 deletions(-)

diff --git a/src/components/views/elements/ActionButton.js b/src/components/views/elements/ActionButton.js
index 1eb082a917..ea9a9bd876 100644
--- a/src/components/views/elements/ActionButton.js
+++ b/src/components/views/elements/ActionButton.js
@@ -16,12 +16,13 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from 'prop-types';
+import createReactClass from 'create-react-class';
 import AccessibleButton from './AccessibleButton';
 import dis from '../../../dispatcher';
 import sdk from '../../../index';
 import Analytics from '../../../Analytics';
 
-export default React.createClass({
+export default createReactClass({
     displayName: 'RoleButton',
 
     propTypes: {
diff --git a/src/components/views/elements/AddressSelector.js b/src/components/views/elements/AddressSelector.js
index 23e6939a24..fad57890c4 100644
--- a/src/components/views/elements/AddressSelector.js
+++ b/src/components/views/elements/AddressSelector.js
@@ -15,15 +15,14 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-'use strict';
-
 import React from 'react';
 import PropTypes from 'prop-types';
+import createReactClass from 'create-react-class';
 import sdk from '../../../index';
 import classNames from 'classnames';
 import { UserAddressType } from '../../../UserAddress';
 
-export default React.createClass({
+export default createReactClass({
     displayName: 'AddressSelector',
 
     propTypes: {
diff --git a/src/components/views/elements/AddressTile.js b/src/components/views/elements/AddressTile.js
index 8011a6c55f..6d6ac20a5d 100644
--- a/src/components/views/elements/AddressTile.js
+++ b/src/components/views/elements/AddressTile.js
@@ -17,6 +17,7 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from 'prop-types';
+import createReactClass from 'create-react-class';
 import classNames from 'classnames';
 import sdk from "../../../index";
 import MatrixClientPeg from "../../../MatrixClientPeg";
@@ -24,7 +25,7 @@ import { _t } from '../../../languageHandler';
 import { UserAddressType } from '../../../UserAddress.js';
 
 
-export default React.createClass({
+export default createReactClass({
     displayName: 'AddressTile',
 
     propTypes: {
diff --git a/src/components/views/elements/DeviceVerifyButtons.js b/src/components/views/elements/DeviceVerifyButtons.js
index f0be1f4bf2..15678b7d7a 100644
--- a/src/components/views/elements/DeviceVerifyButtons.js
+++ b/src/components/views/elements/DeviceVerifyButtons.js
@@ -16,12 +16,13 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from 'prop-types';
+import createReactClass from 'create-react-class';
 import MatrixClientPeg from '../../../MatrixClientPeg';
 import sdk from '../../../index';
 import Modal from '../../../Modal';
 import { _t } from '../../../languageHandler';
 
-export default React.createClass({
+export default createReactClass({
     displayName: 'DeviceVerifyButtons',
 
     propTypes: {
diff --git a/src/components/views/elements/DialogButtons.js b/src/components/views/elements/DialogButtons.js
index 70355b56b7..e7b3a9c7eb 100644
--- a/src/components/views/elements/DialogButtons.js
+++ b/src/components/views/elements/DialogButtons.js
@@ -17,12 +17,13 @@ limitations under the License.
 
 import React from "react";
 import PropTypes from "prop-types";
+import createReactClass from 'create-react-class';
 import { _t } from '../../../languageHandler';
 
 /**
  * Basic container for buttons in modal dialogs.
  */
-module.exports = React.createClass({
+module.exports = createReactClass({
     displayName: "DialogButtons",
 
     propTypes: {
diff --git a/src/components/views/elements/EditableText.js b/src/components/views/elements/EditableText.js
index 44f86f1be8..0f5c4a2192 100644
--- a/src/components/views/elements/EditableText.js
+++ b/src/components/views/elements/EditableText.js
@@ -17,8 +17,9 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from 'prop-types';
+import createReactClass from 'create-react-class';
 
-module.exports = React.createClass({
+module.exports = createReactClass({
     displayName: 'EditableText',
 
     propTypes: {
diff --git a/src/components/views/elements/InlineSpinner.js b/src/components/views/elements/InlineSpinner.js
index f82f309493..18711f90d3 100644
--- a/src/components/views/elements/InlineSpinner.js
+++ b/src/components/views/elements/InlineSpinner.js
@@ -14,9 +14,10 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-const React = require('react');
+import React from "react";
+import createReactClass from 'create-react-class';
 
-module.exports = React.createClass({
+module.exports = createReactClass({
     displayName: 'InlineSpinner',
 
     render: function() {
diff --git a/src/components/views/elements/MemberEventListSummary.js b/src/components/views/elements/MemberEventListSummary.js
index 6d8b490d98..ba31eb5a38 100644
--- a/src/components/views/elements/MemberEventListSummary.js
+++ b/src/components/views/elements/MemberEventListSummary.js
@@ -18,11 +18,12 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from 'prop-types';
+import createReactClass from 'create-react-class';
 import MemberAvatar from '../avatars/MemberAvatar';
 import { _t } from '../../../languageHandler';
 import { formatCommaSeparatedList } from '../../../utils/FormattingUtils';
 
-module.exports = React.createClass({
+module.exports = createReactClass({
     displayName: 'MemberEventListSummary',
 
     propTypes: {
diff --git a/src/components/views/elements/MessageSpinner.js b/src/components/views/elements/MessageSpinner.js
index 19d804f511..f00fdcf576 100644
--- a/src/components/views/elements/MessageSpinner.js
+++ b/src/components/views/elements/MessageSpinner.js
@@ -15,8 +15,9 @@ limitations under the License.
 */
 
 import React from 'react';
+import createReactClass from 'create-react-class';
 
-module.exports = React.createClass({
+module.exports = createReactClass({
     displayName: 'MessageSpinner',
 
     render: function() {
diff --git a/src/components/views/elements/PersistentApp.js b/src/components/views/elements/PersistentApp.js
index facf5d1179..d6931850be 100644
--- a/src/components/views/elements/PersistentApp.js
+++ b/src/components/views/elements/PersistentApp.js
@@ -15,13 +15,14 @@ limitations under the License.
 */
 
 import React from 'react';
+import createReactClass from 'create-react-class';
 import RoomViewStore from '../../../stores/RoomViewStore';
 import ActiveWidgetStore from '../../../stores/ActiveWidgetStore';
 import WidgetUtils from '../../../utils/WidgetUtils';
 import sdk from '../../../index';
 import MatrixClientPeg from '../../../MatrixClientPeg';
 
-module.exports = React.createClass({
+module.exports = createReactClass({
     displayName: 'PersistentApp',
 
     getInitialState: function() {
diff --git a/src/components/views/elements/Pill.js b/src/components/views/elements/Pill.js
index 9d9e5a9e79..4c987a0095 100644
--- a/src/components/views/elements/Pill.js
+++ b/src/components/views/elements/Pill.js
@@ -15,6 +15,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 import React from 'react';
+import createReactClass from 'create-react-class';
 import sdk from '../../../index';
 import dis from '../../../dispatcher';
 import classNames from 'classnames';
@@ -31,7 +32,7 @@ const REGEX_MATRIXTO = new RegExp(MATRIXTO_URL_PATTERN);
 // HttpUtils transformTags to relative links. This excludes event URLs (with `[^\/]*`)
 const REGEX_LOCAL_MATRIXTO = /^#\/(?:user|room|group)\/(([#!@+])[^/]*)$/;
 
-const Pill = React.createClass({
+const Pill = createReactClass({
     statics: {
         isPillUrl: (url) => {
             return !!REGEX_MATRIXTO.exec(url);
diff --git a/src/components/views/elements/PowerSelector.js b/src/components/views/elements/PowerSelector.js
index 4089c4dd86..c56a5d8502 100644
--- a/src/components/views/elements/PowerSelector.js
+++ b/src/components/views/elements/PowerSelector.js
@@ -14,15 +14,14 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-'use strict';
-
 import React from 'react';
 import PropTypes from 'prop-types';
+import createReactClass from 'create-react-class';
 import * as Roles from '../../../Roles';
 import { _t } from '../../../languageHandler';
 import Field from "./Field";
 
-module.exports = React.createClass({
+module.exports = createReactClass({
     displayName: 'PowerSelector',
 
     propTypes: {
diff --git a/src/components/views/elements/ProgressBar.js b/src/components/views/elements/ProgressBar.js
index 15da5d44f6..3561763e51 100644
--- a/src/components/views/elements/ProgressBar.js
+++ b/src/components/views/elements/ProgressBar.js
@@ -14,12 +14,11 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-'use strict';
-
-const React = require('react');
+import React from "react";
 import PropTypes from 'prop-types';
+import createReactClass from 'create-react-class';
 
-module.exports = React.createClass({
+module.exports = createReactClass({
     displayName: 'ProgressBar',
     propTypes: {
         value: PropTypes.number,
diff --git a/src/components/views/elements/SettingsFlag.js b/src/components/views/elements/SettingsFlag.js
index f1bd72f53d..a26646b08c 100644
--- a/src/components/views/elements/SettingsFlag.js
+++ b/src/components/views/elements/SettingsFlag.js
@@ -16,11 +16,12 @@ limitations under the License.
 
 import React from "react";
 import PropTypes from 'prop-types';
+import createReactClass from 'create-react-class';
 import SettingsStore from "../../../settings/SettingsStore";
 import { _t } from '../../../languageHandler';
 import ToggleSwitch from "./ToggleSwitch";
 
-module.exports = React.createClass({
+module.exports = createReactClass({
     displayName: 'SettingsFlag',
     propTypes: {
         name: PropTypes.string.isRequired,
diff --git a/src/components/views/elements/Spinner.js b/src/components/views/elements/Spinner.js
index ca1ee0ef42..5d43e836cc 100644
--- a/src/components/views/elements/Spinner.js
+++ b/src/components/views/elements/Spinner.js
@@ -14,11 +14,10 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-'use strict';
+import React from "react";
+import createReactClass from 'create-react-class';
 
-const React = require('react');
-
-module.exports = React.createClass({
+module.exports = createReactClass({
     displayName: 'Spinner',
 
     render: function() {
diff --git a/src/components/views/elements/TagTile.js b/src/components/views/elements/TagTile.js
index ef9864358b..8a3b85b65a 100644
--- a/src/components/views/elements/TagTile.js
+++ b/src/components/views/elements/TagTile.js
@@ -17,6 +17,7 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from 'prop-types';
+import createReactClass from 'create-react-class';
 import classNames from 'classnames';
 import { MatrixClient } from 'matrix-js-sdk';
 import sdk from '../../../index';
@@ -34,7 +35,7 @@ import TagOrderStore from '../../../stores/TagOrderStore';
 //  - Rooms that are part of the group
 //  - Direct messages with members of the group
 // with the intention that this could be expanded to arbitrary tags in future.
-export default React.createClass({
+export default createReactClass({
     displayName: 'TagTile',
 
     propTypes: {
diff --git a/src/components/views/elements/TintableSvg.js b/src/components/views/elements/TintableSvg.js
index e04bf87793..73ba375d59 100644
--- a/src/components/views/elements/TintableSvg.js
+++ b/src/components/views/elements/TintableSvg.js
@@ -14,14 +14,12 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-'use strict';
-
-const React = require('react');
-const ReactDOM = require("react-dom");
+import React from 'react';
 import PropTypes from 'prop-types';
-const Tinter = require("../../../Tinter");
+import createReactClass from 'create-react-class';
+import Tinter from "../../../Tinter";
 
-var TintableSvg = React.createClass({
+const TintableSvg = createReactClass({
     displayName: 'TintableSvg',
 
     propTypes: {
diff --git a/src/components/views/elements/Tooltip.js b/src/components/views/elements/Tooltip.js
index 27de392a44..bb5f9f0604 100644
--- a/src/components/views/elements/Tooltip.js
+++ b/src/components/views/elements/Tooltip.js
@@ -20,12 +20,13 @@ limitations under the License.
 import React from 'react';
 import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
+import createReactClass from 'create-react-class';
 import dis from '../../../dispatcher';
 import classNames from 'classnames';
 
 const MIN_TOOLTIP_HEIGHT = 25;
 
-module.exports = React.createClass({
+module.exports = createReactClass({
     displayName: 'Tooltip',
 
     propTypes: {
diff --git a/src/components/views/elements/TooltipButton.js b/src/components/views/elements/TooltipButton.js
index 63cf3fe1fe..0cabf776a4 100644
--- a/src/components/views/elements/TooltipButton.js
+++ b/src/components/views/elements/TooltipButton.js
@@ -16,9 +16,10 @@ limitations under the License.
 */
 
 import React from 'react';
+import createReactClass from 'create-react-class';
 import sdk from '../../../index';
 
-module.exports = React.createClass({
+module.exports = createReactClass({
     displayName: 'TooltipButton',
 
     getInitialState: function() {
diff --git a/src/components/views/elements/TruncatedList.js b/src/components/views/elements/TruncatedList.js
index 1a674eef65..e6a5e2ae32 100644
--- a/src/components/views/elements/TruncatedList.js
+++ b/src/components/views/elements/TruncatedList.js
@@ -17,9 +17,10 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from 'prop-types';
+import createReactClass from 'create-react-class';
 import { _t } from '../../../languageHandler';
 
-module.exports = React.createClass({
+module.exports = createReactClass({
     displayName: 'TruncatedList',
 
     propTypes: {
diff --git a/src/components/views/elements/UserSelector.js b/src/components/views/elements/UserSelector.js
index 572f8488bc..a01e3584a0 100644
--- a/src/components/views/elements/UserSelector.js
+++ b/src/components/views/elements/UserSelector.js
@@ -14,13 +14,12 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-'use strict';
-
 import React from 'react';
 import PropTypes from 'prop-types';
+import createReactClass from 'create-react-class';
 import { _t } from '../../../languageHandler';
 
-module.exports = React.createClass({
+module.exports = createReactClass({
     displayName: 'UserSelector',
 
     propTypes: {
diff --git a/src/components/views/groups/GroupInviteTile.js b/src/components/views/groups/GroupInviteTile.js
index 843bb29055..7d7275c55b 100644
--- a/src/components/views/groups/GroupInviteTile.js
+++ b/src/components/views/groups/GroupInviteTile.js
@@ -17,6 +17,7 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from 'prop-types';
+import createReactClass from 'create-react-class';
 import { MatrixClient } from 'matrix-js-sdk';
 import sdk from '../../../index';
 import dis from '../../../dispatcher';
@@ -25,7 +26,7 @@ import classNames from 'classnames';
 import MatrixClientPeg from "../../../MatrixClientPeg";
 import {createMenu} from "../../structures/ContextualMenu";
 
-export default React.createClass({
+export default createReactClass({
     displayName: 'GroupInviteTile',
 
     propTypes: {
diff --git a/src/components/views/groups/GroupMemberInfo.js b/src/components/views/groups/GroupMemberInfo.js
index 34a7e139fd..75e647aa4b 100644
--- a/src/components/views/groups/GroupMemberInfo.js
+++ b/src/components/views/groups/GroupMemberInfo.js
@@ -15,8 +15,9 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import PropTypes from 'prop-types';
 import React from 'react';
+import PropTypes from 'prop-types';
+import createReactClass from 'create-react-class';
 import { MatrixClient } from 'matrix-js-sdk';
 import dis from '../../../dispatcher';
 import Modal from '../../../Modal';
@@ -26,7 +27,7 @@ import { GroupMemberType } from '../../../groups';
 import GroupStore from '../../../stores/GroupStore';
 import AccessibleButton from '../elements/AccessibleButton';
 
-module.exports = React.createClass({
+module.exports = createReactClass({
     displayName: 'GroupMemberInfo',
 
     contextTypes: {
diff --git a/src/components/views/groups/GroupMemberList.js b/src/components/views/groups/GroupMemberList.js
index 9045c92a2e..d13f54579d 100644
--- a/src/components/views/groups/GroupMemberList.js
+++ b/src/components/views/groups/GroupMemberList.js
@@ -15,6 +15,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 import React from 'react';
+import createReactClass from 'create-react-class';
 import { _t } from '../../../languageHandler';
 import sdk from '../../../index';
 import dis from '../../../dispatcher';
@@ -27,7 +28,7 @@ import RightPanel from '../../structures/RightPanel';
 
 const INITIAL_LOAD_NUM_MEMBERS = 30;
 
-export default React.createClass({
+export default createReactClass({
     displayName: 'GroupMemberList',
 
     propTypes: {
diff --git a/src/components/views/groups/GroupMemberTile.js b/src/components/views/groups/GroupMemberTile.js
index 971255d548..ed305382be 100644
--- a/src/components/views/groups/GroupMemberTile.js
+++ b/src/components/views/groups/GroupMemberTile.js
@@ -18,12 +18,13 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from 'prop-types';
+import createReactClass from 'create-react-class';
 import { MatrixClient } from 'matrix-js-sdk';
 import sdk from '../../../index';
 import dis from '../../../dispatcher';
 import { GroupMemberType } from '../../../groups';
 
-export default React.createClass({
+export default createReactClass({
     displayName: 'GroupMemberTile',
 
     propTypes: {
diff --git a/src/components/views/groups/GroupPublicityToggle.js b/src/components/views/groups/GroupPublicityToggle.js
index 98fa598e20..bacf54382a 100644
--- a/src/components/views/groups/GroupPublicityToggle.js
+++ b/src/components/views/groups/GroupPublicityToggle.js
@@ -16,11 +16,12 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from 'prop-types';
+import createReactClass from 'create-react-class';
 import sdk from '../../../index';
 import GroupStore from '../../../stores/GroupStore';
 import ToggleSwitch from "../elements/ToggleSwitch";
 
-export default React.createClass({
+export default createReactClass({
     displayName: 'GroupPublicityToggle',
 
     propTypes: {
diff --git a/src/components/views/groups/GroupRoomInfo.js b/src/components/views/groups/GroupRoomInfo.js
index 7296b25344..c6d07cee50 100644
--- a/src/components/views/groups/GroupRoomInfo.js
+++ b/src/components/views/groups/GroupRoomInfo.js
@@ -14,8 +14,9 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import PropTypes from 'prop-types';
 import React from 'react';
+import PropTypes from 'prop-types';
+import createReactClass from 'create-react-class';
 import { MatrixClient } from 'matrix-js-sdk';
 import dis from '../../../dispatcher';
 import Modal from '../../../Modal';
@@ -23,7 +24,7 @@ import sdk from '../../../index';
 import { _t } from '../../../languageHandler';
 import GroupStore from '../../../stores/GroupStore';
 
-module.exports = React.createClass({
+module.exports = createReactClass({
     displayName: 'GroupRoomInfo',
 
     contextTypes: {
diff --git a/src/components/views/groups/GroupRoomList.js b/src/components/views/groups/GroupRoomList.js
index ec41cd036b..81921568d0 100644
--- a/src/components/views/groups/GroupRoomList.js
+++ b/src/components/views/groups/GroupRoomList.js
@@ -14,6 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 import React from 'react';
+import createReactClass from 'create-react-class';
 import { _t } from '../../../languageHandler';
 import sdk from '../../../index';
 import GroupStore from '../../../stores/GroupStore';
@@ -24,7 +25,7 @@ import TintableSvg from '../elements/TintableSvg';
 
 const INITIAL_LOAD_NUM_ROOMS = 30;
 
-export default React.createClass({
+export default createReactClass({
     propTypes: {
         groupId: PropTypes.string.isRequired,
     },
diff --git a/src/components/views/groups/GroupRoomTile.js b/src/components/views/groups/GroupRoomTile.js
index a4961fefa9..ae325d4796 100644
--- a/src/components/views/groups/GroupRoomTile.js
+++ b/src/components/views/groups/GroupRoomTile.js
@@ -15,13 +15,14 @@ limitations under the License.
 */
 
 import React from 'react';
-import {MatrixClient} from 'matrix-js-sdk';
 import PropTypes from 'prop-types';
+import createReactClass from 'create-react-class';
+import {MatrixClient} from 'matrix-js-sdk';
 import sdk from '../../../index';
 import dis from '../../../dispatcher';
 import { GroupRoomType } from '../../../groups';
 
-const GroupRoomTile = React.createClass({
+const GroupRoomTile = createReactClass({
     displayName: 'GroupRoomTile',
 
     propTypes: {
diff --git a/src/components/views/groups/GroupTile.js b/src/components/views/groups/GroupTile.js
index 18ef5a5637..3b64c10a1e 100644
--- a/src/components/views/groups/GroupTile.js
+++ b/src/components/views/groups/GroupTile.js
@@ -16,6 +16,7 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from 'prop-types';
+import createReactClass from 'create-react-class';
 import {MatrixClient} from 'matrix-js-sdk';
 import { Draggable, Droppable } from 'react-beautiful-dnd';
 import sdk from '../../../index';
@@ -24,7 +25,7 @@ import FlairStore from '../../../stores/FlairStore';
 
 function nop() {}
 
-const GroupTile = React.createClass({
+const GroupTile = createReactClass({
     displayName: 'GroupTile',
 
     propTypes: {
diff --git a/src/components/views/groups/GroupUserSettings.js b/src/components/views/groups/GroupUserSettings.js
index 210fca404a..7d80bdd209 100644
--- a/src/components/views/groups/GroupUserSettings.js
+++ b/src/components/views/groups/GroupUserSettings.js
@@ -16,11 +16,12 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from 'prop-types';
+import createReactClass from 'create-react-class';
 import sdk from '../../../index';
 import { MatrixClient } from 'matrix-js-sdk';
 import { _t } from '../../../languageHandler';
 
-export default React.createClass({
+export default createReactClass({
     displayName: 'GroupUserSettings',
 
     contextTypes: {