Fix: react error on share dialog

Author: yaya-usman

src/components/views/elements/StyledCheckbox.tsx

@@ -16,7 +16,7 @@ limitations under the License.
 
 import React from "react";
 import { randomString } from "matrix-js-sdk/src/randomstring";
-import classnames from 'classnames';
+import classnames from "classnames";
 
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 
@@ -31,11 +31,13 @@ interface IProps extends React.InputHTMLAttributes<HTMLInputElement> {
     id?: string;
 }
 
-interface IState {
-}
+interface IState {}
 
 @replaceableComponent("views.elements.StyledCheckbox")
-export default class StyledCheckbox extends React.PureComponent<IProps, IState> {
+export default class StyledCheckbox extends React.PureComponent<
+    IProps,
+    IState
+> {
     private id: string;
 
     public static readonly defaultProps = {
@@ -50,33 +52,36 @@ export default class StyledCheckbox extends React.PureComponent<IProps, IState>
 
     public render() {
         /* eslint @typescript-eslint/no-unused-vars: ["error", { "ignoreRestSiblings": true }] */
-        const { children, className, kind = CheckboxStyle.Solid, inputRef, ...otherProps } = this.props;
-
-        const newClassName = classnames(
-            "mx_Checkbox",
+        const {
+            children,
             className,
-            {
-                "mx_Checkbox_hasKind": kind,
-                [`mx_Checkbox_kind_${kind}`]: kind,
-            },
+            kind = CheckboxStyle.Solid,
+            inputRef,
+            ...otherProps
+        } = this.props;
+
+        const newClassName = classnames("mx_Checkbox", className, {
+            mx_Checkbox_hasKind: kind,
+            [`mx_Checkbox_kind_${kind}`]: kind,
+        });
+        return (
+            <span className={newClassName}>
+                <input
+                    // Pass through the ref - used for keyboard shortcut access to some buttons
+                    ref={inputRef}
+                    id={this.id}
+                    {...otherProps}
+                    type="checkbox"
+                    readOnly
+                />
+                <label htmlFor={this.id}>
+                    { /* Using the div to center the image */ }
+                    <div className="mx_Checkbox_background">
+                        <div className="mx_Checkbox_checkmark" />
+                    </div>
+                    <div>{ this.props.children }</div>
+                </label>
+            </span>
         );
-        return <span className={newClassName}>
-            <input
-                // Pass through the ref - used for keyboard shortcut access to some buttons
-                ref={inputRef}
-                id={this.id}
-                {...otherProps}
-                type="checkbox"
-            />
-            <label htmlFor={this.id}>
-                { /* Using the div to center the image */ }
-                <div className="mx_Checkbox_background">
-                    <div className="mx_Checkbox_checkmark" />
-                </div>
-                <div>
-                    { this.props.children }
-                </div>
-            </label>
-        </span>;
     }
 }