Conform more of the code base to strict null checking (#10147)

* Conform more of the code base to strict null checking

* More strict fixes

* More strict work

* Fix missing optional type

* Iterate

src/components/views/audio_messages/Clock.tsx

@@ -43,7 +43,7 @@ export default class Clock extends React.Component<Props> {
         return currentFloor !== nextFloor;
     }
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         return (
             <span aria-live={this.props["aria-live"]} role={this.props.role} className="mx_Clock">
                 {this.props.formatFn(this.props.seconds)}

src/components/views/audio_messages/DurationClock.tsx

@@ -48,7 +48,7 @@ export default class DurationClock extends React.PureComponent<IProps, IState> {
         this.setState({ durationSeconds: time[1] });
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         return <Clock seconds={this.state.durationSeconds} />;
     }
 }

src/components/views/audio_messages/LiveRecordingClock.tsx

@@ -59,7 +59,7 @@ export default class LiveRecordingClock extends React.PureComponent<IProps, ISta
         });
     }
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         return <Clock seconds={this.state.seconds} aria-live="off" />;
     }
 }

src/components/views/audio_messages/LiveRecordingWaveform.tsx

@@ -63,7 +63,7 @@ export default class LiveRecordingWaveform extends React.PureComponent<IProps, I
         this.setState({ waveform: this.waveform });
     }
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         return <Waveform relHeights={this.state.waveform} />;
     }
 }

src/components/views/audio_messages/PlaybackClock.tsx

@@ -65,7 +65,7 @@ export default class PlaybackClock extends React.PureComponent<IProps, IState> {
         this.setState({ seconds: time[0], durationSeconds: time[1] });
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         let seconds = this.state.seconds;
         if (this.state.playbackPhase === PlaybackState.Stopped) {
             if (Number.isFinite(this.props.defaultDisplaySeconds)) {

src/components/views/audio_messages/PlaybackWaveform.tsx

@@ -61,7 +61,7 @@ export default class PlaybackWaveform extends React.PureComponent<IProps, IState
         this.setState({ progress });
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         return <Waveform relHeights={this.state.heights} progress={this.state.progress} />;
     }
 }

src/components/views/audio_messages/Waveform.tsx

@@ -41,7 +41,7 @@ export default class Waveform extends React.PureComponent<IProps, IState> {
         progress: 1,
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         return (
             <div className="mx_Waveform">
                 {this.props.relHeights.map((h, i) => {

src/components/views/auth/CaptchaForm.tsx

@@ -122,7 +122,7 @@ export default class CaptchaForm extends React.Component<ICaptchaFormProps, ICap
         }
     }
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         let error = null;
         if (this.state.errorText) {
             error = <div className="error">{this.state.errorText}</div>;

src/components/views/auth/EmailField.tsx

@@ -74,7 +74,7 @@ class EmailField extends PureComponent<IProps> {
         return result;
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         return (
             <Field
                 id={this.props.id}

src/components/views/auth/InteractiveAuthEntryComponents.tsx

@@ -136,7 +136,7 @@ export class PasswordAuthEntry extends React.Component<IAuthEntryProps, IPasswor
         });
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const passwordBoxClass = classNames({
             error: this.props.errorText,
         });
@@ -207,7 +207,7 @@ export class RecaptchaAuthEntry extends React.Component<IRecaptchaAuthEntryProps
         });
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         if (this.props.busy) {
             return <Spinner />;
         }
@@ -353,7 +353,7 @@ export class TermsAuthEntry extends React.Component<ITermsAuthEntryProps, ITerms
         }
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         if (this.props.busy) {
             return <Spinner />;
         }
@@ -442,7 +442,7 @@ export class EmailIdentityAuthEntry extends React.Component<
         this.props.onPhaseChange(DEFAULT_PHASE);
     }
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         let errorSection;
         // ignore the error when errcode is M_UNAUTHORIZED as we expect that error until the link is clicked.
         if (this.props.errorText && this.props.errorCode !== "M_UNAUTHORIZED") {
@@ -650,7 +650,7 @@ export class MsisdnAuthEntry extends React.Component<IMsisdnAuthEntryProps, IMsi
         }
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         if (this.state.requestingToken) {
             return <Spinner />;
         } else {
@@ -733,7 +733,7 @@ export class RegistrationTokenAuthEntry extends React.Component<IAuthEntryProps,
         });
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const registrationTokenBoxClass = classNames({
             error: this.props.errorText,
         });
@@ -857,7 +857,7 @@ export class SSOAuthEntry extends React.Component<ISSOAuthEntryProps, ISSOAuthEn
         this.props.submitAuthDict({});
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         let continueButton = null;
         const cancelButton = (
             <AccessibleButton
@@ -952,7 +952,7 @@ export class FallbackAuthEntry extends React.Component<IAuthEntryProps> {
         }
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         let errorSection;
         if (this.props.errorText) {
             errorSection = (

src/components/views/auth/LoginWithQR.tsx

@@ -229,7 +229,7 @@ export default class LoginWithQR extends React.Component<IProps, IState> {
         }
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         return (
             <LoginWithQRFlow
                 onClick={this.onClick}

src/components/views/auth/LoginWithQRFlow.tsx

@@ -69,7 +69,7 @@ export default class LoginWithQRFlow extends React.Component<IProps> {
         );
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         let title = "";
         let titleIcon: JSX.Element | undefined;
         let main: JSX.Element | undefined;

src/components/views/auth/PassphraseConfirmField.tsx

@@ -65,7 +65,7 @@ class PassphraseConfirmField extends PureComponent<IProps> {
         return result;
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         return (
             <Field
                 id={this.props.id}

src/components/views/auth/PassphraseField.tsx

@@ -102,7 +102,7 @@ class PassphraseField extends PureComponent<IProps> {
         return result;
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         return (
             <Field
                 id={this.props.id}

src/components/views/auth/PasswordLogin.tsx

@@ -367,7 +367,7 @@ export default class PasswordLogin extends React.PureComponent<IProps, IState> {
         }
     }
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         let forgotPasswordJsx;
 
         if (this.props.onForgotPasswordClick) {

src/components/views/auth/RegistrationForm.tsx

@@ -534,7 +534,7 @@ export default class RegistrationForm extends React.PureComponent<IProps, IState
         );
     }
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const registerButton = (
             <input className="mx_Login_submit" type="submit" value={_t("Register")} disabled={!this.props.canSubmit} />
         );

src/components/views/avatars/MemberAvatar.tsx

@@ -109,7 +109,7 @@ export default function MemberAvatar({
 }
 
 export class LegacyMemberAvatar extends React.Component<IProps> {
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         return <MemberAvatar {...this.props}>{this.props.children}</MemberAvatar>;
     }
 }

src/components/views/avatars/RoomAvatar.tsx

@@ -135,7 +135,7 @@ export default class RoomAvatar extends React.Component<IProps, IState> {
         return this.props.room?.roomId || this.props.oobData?.roomId;
     }
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const { room, oobData, viewAvatarOnClick, onClick, className, ...otherProps } = this.props;
         const roomName = room?.name ?? oobData.name;
 

src/components/views/beta/BetaCard.tsx

@@ -91,7 +91,7 @@ const BetaCard: React.FC<IProps> = ({ title: titleOverride, featureId }) => {
         );
     }
 
-    let refreshWarning: string;
+    let refreshWarning: string | undefined;
     if (requiresRefresh) {
         const brand = SdkConfig.get().brand;
         refreshWarning = value

src/components/views/context_menus/DialpadContextMenu.tsx

@@ -69,7 +69,7 @@ export default class DialpadContextMenu extends React.Component<IProps, IState>
         this.setState({ value: ev.target.value });
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         return (
             <ContextMenu {...this.props}>
                 <div className="mx_DialPadContextMenuWrapper">

src/components/views/context_menus/GenericElementContextMenu.tsx

@@ -47,7 +47,7 @@ export default class GenericElementContextMenu extends React.Component<IProps> {
         }
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         return <div>{this.props.element}</div>;
     }
 }

src/components/views/context_menus/GenericTextContextMenu.tsx

@@ -21,7 +21,7 @@ interface IProps {
 }
 
 export default class GenericTextContextMenu extends React.Component<IProps> {
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         return (
             <div className="mx_Tooltip mx_Tooltip_visible" style={{ display: "block" }}>
                 {this.props.message}

src/components/views/context_menus/LegacyCallContextMenu.tsx

@@ -46,7 +46,7 @@ export default class LegacyCallContextMenu extends React.Component<IProps> {
         this.props.onFinished();
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const holdUnholdCaption = this.props.call.isRemoteOnHold() ? _t("Resume") : _t("Hold");
         const handler = this.props.call.isRemoteOnHold() ? this.onUnholdClick : this.onHoldClick;
 

src/components/views/context_menus/MessageContextMenu.tsx

@@ -376,7 +376,7 @@ export default class MessageContextMenu extends React.Component<IProps, IState>
         this.closeMenu();
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const cli = MatrixClientPeg.get();
         const me = cli.getUserId();
         const { mxEvent, rightClick, link, eventTileOps, reactions, collapseReplyChain, ...other } = this.props;

src/components/views/dialogs/AskInviteAnywayDialog.tsx

@@ -48,7 +48,7 @@ export default class AskInviteAnywayDialog extends React.Component<IProps> {
         this.props.onFinished(false);
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const errorList = this.props.unknownProfileUsers.map((address) => (
             <li key={address.userId}>
                 {address.userId}: {address.errorText}

src/components/views/dialogs/BaseDialog.tsx

@@ -115,7 +115,7 @@ export default class BaseDialog extends React.Component<IProps> {
         this.props.onFinished(false);
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         let cancelButton;
         if (this.props.hasCancel) {
             cancelButton = (

src/components/views/dialogs/BugReportDialog.tsx

@@ -180,7 +180,7 @@ export default class BugReportDialog extends React.Component<IProps, IState> {
         this.setState({ downloadProgress });
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         let error = null;
         if (this.state.err) {
             error = <div className="error">{this.state.err}</div>;

src/components/views/dialogs/ChangelogDialog.tsx

@@ -86,7 +86,7 @@ export default class ChangelogDialog extends React.Component<IProps, State> {
         );
     }
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const logs = REPOS.map((repo) => {
             let content;
             if (this.state[repo] == null) {

src/components/views/dialogs/ConfirmAndWaitRedactDialog.tsx

@@ -72,7 +72,7 @@ export default class ConfirmAndWaitRedactDialog extends React.PureComponent<IPro
         }
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         if (this.state.isRedacting) {
             if (this.state.redactionErrorCode) {
                 const code = this.state.redactionErrorCode;

src/components/views/dialogs/ConfirmRedactDialog.tsx

@@ -33,7 +33,7 @@ interface IProps {
  * A dialog for confirming a redaction.
  */
 export default class ConfirmRedactDialog extends React.Component<IProps> {
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         return (
             <TextInputDialog
                 onFinished={this.props.onFinished}

src/components/views/dialogs/ConfirmUserActionDialog.tsx

@@ -83,7 +83,7 @@ export default class ConfirmUserActionDialog extends React.Component<IProps, ISt
         });
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const confirmButtonClass = this.props.danger ? "danger" : "";
 
         let reasonBox;

src/components/views/dialogs/ConfirmWipeDeviceDialog.tsx

@@ -33,7 +33,7 @@ export default class ConfirmWipeDeviceDialog extends React.Component<IProps> {
         this.props.onFinished(false);
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         return (
             <BaseDialog
                 className="mx_ConfirmWipeDeviceDialog"

src/components/views/dialogs/CreateRoomDialog.tsx

@@ -216,7 +216,7 @@ export default class CreateRoomDialog extends React.Component<IProps, IState> {
         ],
     });
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const isVideoRoom = this.props.type === RoomType.ElementVideo;
 
         let aliasField: JSX.Element;

src/components/views/dialogs/DeactivateAccountDialog.tsx

@@ -182,7 +182,7 @@ export default class DeactivateAccountDialog extends React.Component<IProps, ISt
             });
     }
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         let error = null;
         if (this.state.errStr) {
             error = <div className="error">{this.state.errStr}</div>;

src/components/views/dialogs/EndPollDialog.tsx

@@ -67,7 +67,7 @@ export default class EndPollDialog extends React.Component<IProps> {
         this.props.onFinished(endPoll);
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         return (
             <QuestionDialog
                 title={_t("End Poll")}

src/components/views/dialogs/ErrorDialog.tsx

@@ -52,7 +52,7 @@ export default class ErrorDialog extends React.Component<IProps, IState> {
         this.props.onFinished(true);
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         return (
             <BaseDialog
                 className="mx_ErrorDialog"

src/components/views/dialogs/FeedbackDialog.tsx

@@ -97,7 +97,7 @@ const FeedbackDialog: React.FC<IProps> = (props: IProps) => {
         );
     }
 
-    let bugReports = null;
+    let bugReports: JSX.Element | null = null;
     if (rageshakeUrl) {
         bugReports = (
             <p className="mx_FeedbackDialog_section_microcopy">

src/components/views/dialogs/IncomingSasDialog.tsx

@@ -256,7 +256,7 @@ export default class IncomingSasDialog extends React.Component<IProps, IState> {
         return <VerificationCancelled onDone={this.onCancelClick} />;
     }
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         let body;
         switch (this.state.phase) {
             case PHASE_START:

src/components/views/dialogs/InfoDialog.tsx

@@ -44,7 +44,7 @@ export default class InfoDialog extends React.Component<IProps> {
         this.props.onFinished();
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         return (
             <BaseDialog
                 className="mx_InfoDialog"

src/components/views/dialogs/IntegrationsDisabledDialog.tsx

@@ -35,7 +35,7 @@ export default class IntegrationsDisabledDialog extends React.Component<IProps>
         dis.fire(Action.ViewUserSettings);
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         return (
             <BaseDialog
                 className="mx_IntegrationsDisabledDialog"

src/components/views/dialogs/IntegrationsImpossibleDialog.tsx

@@ -29,7 +29,7 @@ export default class IntegrationsImpossibleDialog extends React.Component<IProps
         this.props.onFinished();
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const brand = SdkConfig.get().brand;
 
         return (

src/components/views/dialogs/InteractiveAuthDialog.tsx

@@ -140,7 +140,7 @@ export default class InteractiveAuthDialog extends React.Component<InteractiveAu
         this.props.onFinished(false);
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         // Let's pick a title, body, and other params text that we'll show to the user. The order
         // is most specific first, so stagePhase > our props > defaults.
 

src/components/views/dialogs/InviteDialog.tsx

@@ -100,7 +100,7 @@ class DMUserTile extends React.PureComponent<IDMUserTileProps> {
         this.props.onRemove(this.props.member);
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const avatarSize = 20;
         const avatar = <SearchResultAvatar user={this.props.member} size={avatarSize} />;
 
@@ -187,7 +187,7 @@ class DMRoomTile extends React.PureComponent<IDMRoomTileProps> {
         return result;
     }
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         let timestamp = null;
         if (this.props.lastActiveTs) {
             const humanTs = humanizeTime(this.props.lastActiveTs);
@@ -1082,7 +1082,7 @@ export default class InviteDialog extends React.PureComponent<Props, IInviteDial
         }
     }
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         let spinner = null;
         if (this.state.busy) {
             spinner = <Spinner w={20} h={20} />;

src/components/views/dialogs/LogoutDialog.tsx

@@ -127,7 +127,7 @@ export default class LogoutDialog extends React.Component<IProps, IState> {
         this.props.onFinished(true);
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         if (this.state.shouldLoadBackupStatus) {
             const description = (
                 <div>

src/components/views/dialogs/ManualDeviceKeyVerificationDialog.tsx

@@ -40,7 +40,7 @@ export default class ManualDeviceKeyVerificationDialog extends React.Component<I
         this.props.onFinished(confirm);
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         let text;
         if (MatrixClientPeg.get().getUserId() === this.props.userId) {
             text = _t("Confirm by comparing the following with the User Settings in your other session:");

src/components/views/dialogs/MessageEditHistoryDialog.tsx

@@ -152,7 +152,7 @@ export default class MessageEditHistoryDialog extends React.PureComponent<IProps
         return nodes;
     }
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         let content;
         if (this.state.error) {
             const { error } = this.state;

src/components/views/dialogs/ModalWidgetDialog.tsx

@@ -124,7 +124,7 @@ export default class ModalWidgetDialog extends React.PureComponent<IProps, IStat
         this.state.messaging.transport.reply(ev.detail, {} as IWidgetApiAcknowledgeResponseData);
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const templated = this.widget.getCompleteUrl({
             widgetRoomId: this.props.widgetRoomId,
             currentUserId: MatrixClientPeg.get().getUserId(),

src/components/views/dialogs/QuestionDialog.tsx

@@ -58,7 +58,7 @@ export default class QuestionDialog extends React.Component<IQuestionDialogProps
         this.props.onFinished(false);
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         let primaryButtonClass = "";
         if (this.props.danger) {
             primaryButtonClass = "danger";

src/components/views/dialogs/ReportEventDialog.tsx

@@ -273,7 +273,7 @@ export default class ReportEventDialog extends React.Component<IProps, IState> {
         }
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         let error = null;
         if (this.state.err) {
             error = <div className="error">{this.state.err}</div>;

src/components/views/dialogs/RoomSettingsDialog.tsx

@@ -181,7 +181,7 @@ export default class RoomSettingsDialog extends React.Component<IProps, IState>
         return tabs;
     }
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const roomName = this.state.roomName;
         return (
             <BaseDialog

src/components/views/dialogs/RoomUpgradeDialog.tsx

@@ -68,7 +68,7 @@ export default class RoomUpgradeDialog extends React.Component<IProps, IState> {
             });
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         let buttons;
         if (this.state.busy) {
             buttons = <Spinner />;

src/components/views/dialogs/RoomUpgradeWarningDialog.tsx

@@ -100,7 +100,7 @@ export default class RoomUpgradeWarningDialog extends React.Component<IProps, IS
         Modal.createDialog(BugReportDialog, {});
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const brand = SdkConfig.get().brand;
 
         let inviteToggle = null;

src/components/views/dialogs/ScrollableBaseModal.tsx

@@ -73,7 +73,7 @@ export default abstract class ScrollableBaseModal<
     protected abstract submit(): void;
     protected abstract renderContent(): React.ReactNode;
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         return (
             <MatrixClientContext.Provider value={this.matrixClient}>
                 <FocusLock

src/components/views/dialogs/ServerOfflineDialog.tsx

@@ -88,7 +88,7 @@ export default class ServerOfflineDialog extends React.PureComponent<IProps> {
         });
     }
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         let timeline = this.renderTimeline().filter((c) => !!c); // remove nulls for next check
         if (timeline.length === 0) {
             timeline = [<div key={1}>{_t("You're all caught up.")}</div>];

src/components/views/dialogs/ServerPickerDialog.tsx

@@ -163,7 +163,7 @@ export default class ServerPickerDialog extends React.PureComponent<IProps, ISta
         this.props.onFinished(this.state.defaultChosen ? this.defaultServer : this.validatedConf);
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         let text;
         if (this.defaultServer.hsName === "matrix.org") {
             text = _t("Matrix.org is the biggest public homeserver in the world, so it's a good place for many.");

src/components/views/dialogs/SeshatResetDialog.tsx

@@ -22,7 +22,7 @@ import DialogButtons from "../elements/DialogButtons";
 import { IDialogProps } from "./IDialogProps";
 
 export default class SeshatResetDialog extends React.PureComponent<IDialogProps> {
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         return (
             <BaseDialog
                 hasCancel={true}

src/components/views/dialogs/SessionRestoreErrorDialog.tsx

@@ -54,7 +54,7 @@ export default class SessionRestoreErrorDialog extends React.Component<IProps> {
         window.location.reload();
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const brand = SdkConfig.get().brand;
 
         const clearStorageButton = (

src/components/views/dialogs/SetEmailDialog.tsx

@@ -138,7 +138,7 @@ export default class SetEmailDialog extends React.Component<IProps, IState> {
         );
     }
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const emailInput = this.state.emailBusy ? (
             <Spinner />
         ) : (

src/components/views/dialogs/ShareDialog.tsx

@@ -71,14 +71,14 @@ interface IProps extends IDialogProps {
 
 interface IState {
     linkSpecificEvent: boolean;
-    permalinkCreator: RoomPermalinkCreator;
+    permalinkCreator: RoomPermalinkCreator | null;
 }
 
 export default class ShareDialog extends React.PureComponent<IProps, IState> {
     public constructor(props: IProps) {
         super(props);
 
-        let permalinkCreator: RoomPermalinkCreator = null;
+        let permalinkCreator: RoomPermalinkCreator | null = null;
         if (props.target instanceof Room) {
             permalinkCreator = new RoomPermalinkCreator(props.target);
             permalinkCreator.load();
@@ -108,15 +108,15 @@ export default class ShareDialog extends React.PureComponent<IProps, IState> {
         if (this.props.target instanceof Room) {
             if (this.state.linkSpecificEvent) {
                 const events = this.props.target.getLiveTimeline().getEvents();
-                matrixToUrl = this.state.permalinkCreator.forEvent(events[events.length - 1].getId());
+                matrixToUrl = this.state.permalinkCreator!.forEvent(events[events.length - 1].getId()!);
             } else {
-                matrixToUrl = this.state.permalinkCreator.forShareableRoom();
+                matrixToUrl = this.state.permalinkCreator!.forShareableRoom();
             }
         } else if (this.props.target instanceof User || this.props.target instanceof RoomMember) {
             matrixToUrl = makeUserPermalink(this.props.target.userId);
         } else if (this.props.target instanceof MatrixEvent) {
             if (this.state.linkSpecificEvent) {
-                matrixToUrl = this.props.permalinkCreator.forEvent(this.props.target.getId());
+                matrixToUrl = this.props.permalinkCreator.forEvent(this.props.target.getId()!);
             } else {
                 matrixToUrl = this.props.permalinkCreator.forShareableRoom();
             }
@@ -124,7 +124,7 @@ export default class ShareDialog extends React.PureComponent<IProps, IState> {
         return matrixToUrl;
     }
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         let title;
         let checkbox;
 

src/components/views/dialogs/StorageEvictedDialog.tsx

@@ -37,7 +37,7 @@ export default class StorageEvictedDialog extends React.Component<IProps> {
         this.props.onFinished(true);
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         let logRequest;
         if (SdkConfig.get().bug_report_endpoint_url) {
             logRequest = _t(

src/components/views/dialogs/TermsDialog.tsx

@@ -34,7 +34,7 @@ class TermsCheckbox extends React.PureComponent<ITermsCheckboxProps> {
         this.props.onChange(this.props.url, ev.currentTarget.checked);
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         return <input type="checkbox" onChange={this.onChange} checked={this.props.checked} />;
     }
 }
@@ -126,7 +126,7 @@ export default class TermsDialog extends React.PureComponent<ITermsDialogProps,
         });
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const rows = [];
         for (const policiesAndService of this.props.policiesAndServicePairs) {
             const parsedBaseUrl = url.parse(policiesAndService.service.baseUrl);

src/components/views/dialogs/TextInputDialog.tsx

@@ -106,7 +106,7 @@ export default class TextInputDialog extends React.Component<IProps, IState> {
         return result;
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         return (
             <BaseDialog
                 className="mx_TextInputDialog"

src/components/views/dialogs/UploadConfirmDialog.tsx

@@ -65,7 +65,7 @@ export default class UploadConfirmDialog extends React.Component<IProps> {
         this.props.onFinished(true, true);
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         let title: string;
         if (this.props.totalFiles > 1 && this.props.currentIndex !== undefined) {
             title = _t("Upload files (%(current)s of %(total)s)", {

src/components/views/dialogs/UploadFailureDialog.tsx

@@ -43,7 +43,7 @@ export default class UploadFailureDialog extends React.Component<IProps> {
         this.props.onFinished(true);
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         let message;
         let preview;
         let buttons;

src/components/views/dialogs/UserSettingsDialog.tsx

@@ -210,7 +210,7 @@ export default class UserSettingsDialog extends React.Component<IProps, IState>
         return tabs;
     }
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         return (
             <BaseDialog
                 className="mx_UserSettingsDialog"

src/components/views/dialogs/VerificationRequestDialog.tsx

@@ -47,7 +47,7 @@ export default class VerificationRequestDialog extends React.Component<IProps, I
         }
     }
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const request = this.state.verificationRequest;
         const otherUserId = request && request.otherUserId;
         const member = this.props.member || (otherUserId && MatrixClientPeg.get().getUser(otherUserId));

src/components/views/dialogs/WidgetCapabilitiesPromptDialog.tsx

@@ -86,7 +86,7 @@ export default class WidgetCapabilitiesPromptDialog extends React.PureComponent<
         this.props.onFinished({ approved, remember: this.state.rememberSelection });
     }
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         // We specifically order the timeline capabilities down to the bottom. The capability text
         // generation cares strongly about this.
         const orderedCapabilities = Object.entries(this.state.booleanStates).sort(([capA], [capB]) => {

src/components/views/dialogs/WidgetOpenIDPermissionsDialog.tsx

@@ -73,7 +73,7 @@ export default class WidgetOpenIDPermissionsDialog extends React.PureComponent<I
         this.setState({ rememberSelection: newVal });
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         return (
             <BaseDialog
                 className="mx_WidgetOpenIDPermissionsDialog"

src/components/views/dialogs/security/AccessSecretStorageDialog.tsx

@@ -268,7 +268,7 @@ export default class AccessSecretStorageDialog extends React.PureComponent<IProp
         }
     }
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const hasPassphrase =
             this.props.keyInfo &&
             this.props.keyInfo.passphrase &&

src/components/views/dialogs/security/ConfirmDestroyCrossSigningDialog.tsx

@@ -33,7 +33,7 @@ export default class ConfirmDestroyCrossSigningDialog extends React.Component<IP
         this.props.onFinished(false);
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         return (
             <BaseDialog
                 className="mx_ConfirmDestroyCrossSigningDialog"

src/components/views/dialogs/security/CreateCrossSigningDialog.tsx

@@ -168,7 +168,7 @@ export default class CreateCrossSigningDialog extends React.PureComponent<IProps
         this.props.onFinished(false);
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         let content;
         if (this.state.error) {
             content = (

src/components/views/dialogs/security/RestoreKeyBackupDialog.tsx

@@ -308,7 +308,7 @@ export default class RestoreKeyBackupDialog extends React.PureComponent<IProps,
         }
     }
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const backupHasPassphrase =
             this.state.backupInfo &&
             this.state.backupInfo.auth_data &&

src/components/views/dialogs/security/SetupEncryptionDialog.tsx

@@ -57,7 +57,7 @@ export default class SetupEncryptionDialog extends React.Component<IProps, IStat
         this.setState({ icon: iconFromPhase(this.store.phase) });
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         return (
             <BaseDialog
                 headerImage={this.state.icon}

src/components/views/elements/AccessibleTooltipButton.tsx

@@ -73,7 +73,7 @@ export default class AccessibleTooltipButton extends React.PureComponent<IProps,
         if (ev.relatedTarget) this.showTooltip();
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
         const { title, tooltip, children, tooltipClassName, forceHide, alignment, onHideTooltip, ...props } =
             this.props;

src/components/views/elements/AppPermission.tsx

@@ -88,7 +88,7 @@ export default class AppPermission extends React.Component<IProps, IState> {
         }
     }
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const brand = SdkConfig.get().brand;
 
         const displayName = this.state.roomMember ? this.state.roomMember.name : this.props.creatorUserId;

src/components/views/elements/AppTile.tsx

@@ -544,7 +544,7 @@ export default class AppTile extends React.Component<IProps, IState> {
         this.setState({ menuDisplayed: false });
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         let appTileBody;
 
         // Note that there is advice saying allow-scripts shouldn't be used with allow-same-origin

src/components/views/elements/DesktopCapturerSourcePicker.tsx

@@ -55,7 +55,7 @@ export class ExistingSource extends React.Component<ExistingSourceIProps> {
         this.props.onSelect(this.props.source);
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const thumbnailClasses = classNames({
             mx_desktopCapturerSourcePicker_source_thumbnail: true,
             mx_desktopCapturerSourcePicker_source_thumbnail_selected: this.props.selected,
@@ -149,7 +149,7 @@ export default class DesktopCapturerSourcePicker extends React.Component<PickerI
         return new Tab(type, label, null, <div className="mx_desktopCapturerSourcePicker_tab">{sources}</div>);
     }
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const tabs = [
             this.getTab("screen", _t("Share entire screen")),
             this.getTab("window", _t("Application window")),

src/components/views/elements/DialPadBackspaceButton.tsx

@@ -25,7 +25,7 @@ interface IProps {
 }
 
 export default class DialPadBackspaceButton extends React.PureComponent<IProps> {
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         return (
             <div className="mx_DialPadBackspaceButtonWrapper">
                 <AccessibleButton

src/components/views/elements/DialogButtons.tsx

@@ -71,7 +71,7 @@ export default class DialogButtons extends React.Component<IProps> {
         this.props.onCancel(event);
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         let primaryButtonClassName = "mx_Dialog_primary";
         if (this.props.primaryButtonClass) {
             primaryButtonClassName += " " + this.props.primaryButtonClass;

src/components/views/elements/Draggable.tsx

@@ -73,7 +73,7 @@ export default class Draggable extends React.Component<IProps, IState> {
         });
     }
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         return <div className={this.props.className} onMouseDown={this.onMouseDown} />;
     }
 }

src/components/views/elements/Dropdown.tsx

@@ -49,7 +49,7 @@ class MenuOption extends React.Component<IMenuOptionProps> {
         this.props.onClick(this.props.dropdownKey);
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const optClasses = classnames({
             mx_Dropdown_option: true,
             mx_Dropdown_option_highlight: this.props.highlighted,
@@ -327,7 +327,7 @@ export default class Dropdown extends React.Component<DropdownProps, IState> {
         return options;
     }
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         let currentValue;
 
         const menuStyle: CSSProperties = {};

src/components/views/elements/EditableItemList.tsx

@@ -57,7 +57,7 @@ export class EditableItem extends React.Component<IItemProps, IItemState> {
         this.setState({ verifyRemove: false });
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         if (this.state.verifyRemove) {
             return (
                 <div className="mx_EditableItem">
@@ -148,7 +148,7 @@ export default class EditableItemList<P = {}> extends React.PureComponent<IProps
         );
     }
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const editableItems = this.props.items.map((item, index) => {
             if (!this.props.canRemove) {
                 return <li key={item}>{item}</li>;

src/components/views/elements/EditableText.tsx

@@ -202,7 +202,7 @@ export default class EditableText extends React.Component<IProps, IState> {
         this.showPlaceholder(!this.value);
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const { className, editable, initialValue, label, labelClassName } = this.props;
         let editableEl;
 

src/components/views/elements/EditableTextContainer.tsx

@@ -133,7 +133,7 @@ export default class EditableTextContainer extends React.Component<IProps, IStat
         );
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         if (this.state.busy) {
             return <Spinner />;
         } else if (this.state.errorString) {

src/components/views/elements/EventListSummary.tsx

@@ -495,7 +495,7 @@ export default class EventListSummary extends React.Component<IProps> {
         };
     }
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const eventsToRender = this.props.events;
 
         // Map user IDs to latest Avatar Member. ES6 Maps are ordered by when the key was created,

src/components/views/elements/EventTilePreview.tsx

@@ -111,7 +111,7 @@ export default class EventTilePreview extends React.Component<IProps, IState> {
         return event;
     }
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const className = classnames(this.props.className, {
             mx_IRCLayout: this.props.layout == Layout.IRC,
             mx_EventTilePreview_loader: !this.props.userId,

src/components/views/elements/Field.tsx

@@ -232,7 +232,7 @@ export default class Field extends React.PureComponent<PropShapes, IState> {
         return valid;
     }
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         /* eslint @typescript-eslint/no-unused-vars: ["error", { "ignoreRestSiblings": true }] */
         const {
             element,

src/components/views/elements/IRCTimelineProfileResizer.tsx

@@ -91,7 +91,7 @@ export default class IRCTimelineProfileResizer extends React.Component<IProps, I
         }
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         return <Draggable className="mx_ProfileResizer" dragFunc={this.dragFunc} onMouseUp={this.onMoueUp} />;
     }
 }

src/components/views/elements/ImageView.tsx

@@ -411,7 +411,7 @@ export default class ImageView extends React.Component<IProps, IState> {
         return <React.Fragment>{contextMenu}</React.Fragment>;
     }
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const showEventMeta = !!this.props.mxEvent;
 
         let transitionClassName;

src/components/views/elements/InfoTooltip.tsx

@@ -39,7 +39,7 @@ export default class InfoTooltip extends React.PureComponent<ITooltipProps> {
         super(props);
     }
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const { tooltip, children, tooltipClassName, className, kind } = this.props;
         const title = _t("Information");
         const iconClassName =

src/components/views/elements/InlineSpinner.tsx

@@ -30,7 +30,7 @@ export default class InlineSpinner extends React.PureComponent<IProps> {
         h: 16,
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         return (
             <div className="mx_InlineSpinner">
                 <div

src/components/views/elements/InviteReason.tsx

@@ -45,7 +45,7 @@ export default class InviteReason extends React.PureComponent<IProps, IState> {
         });
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const classes = classNames({
             mx_InviteReason: true,
             mx_InviteReason_hidden: this.state.hidden,

src/components/views/elements/LabelledToggleSwitch.tsx

@@ -43,7 +43,7 @@ interface IProps {
 }
 
 export default class LabelledToggleSwitch extends React.PureComponent<IProps> {
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         // This is a minimal version of a SettingsFlag
         const { label, caption } = this.props;
         let firstPart = (

src/components/views/elements/LanguageDropdown.tsx

@@ -83,7 +83,7 @@ export default class LanguageDropdown extends React.Component<IProps, IState> {
         });
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         if (this.state.langs === null) {
             return <Spinner />;
         }

src/components/views/elements/LazyRenderList.tsx

@@ -117,7 +117,7 @@ export default class LazyRenderList<T = any> extends React.Component<IProps<T>,
         return new ItemRange(topCount, renderCount, bottomCount);
     }
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const { itemHeight, items, renderItem } = this.props;
         const { renderRange } = this.state;
         const { topCount, renderCount, bottomCount } = renderRange;

src/components/views/elements/LinkWithTooltip.tsx

@@ -25,7 +25,7 @@ export default class LinkWithTooltip extends React.Component<IProps> {
         super(props);
     }
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const { children, tooltip, ...props } = this.props;
 
         return (

src/components/views/elements/Measured.tsx

@@ -64,7 +64,7 @@ export default class Measured extends React.PureComponent<IProps> {
         this.props.onMeasurement(entry.contentRect.width <= this.props.breakpoint);
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         return null;
     }
 }

src/components/views/elements/PersistedElement.tsx

@@ -191,7 +191,7 @@ export default class PersistedElement extends React.Component<IProps> {
         });
     }
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         return <div ref={this.collectChildContainer} />;
     }
 }

src/components/views/elements/Pill.tsx

@@ -214,7 +214,7 @@ export default class Pill extends React.Component<IProps, IState> {
         });
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const resource = this.state.resourceId;
 
         let avatar = null;

src/components/views/elements/PowerSelector.tsx

@@ -148,7 +148,7 @@ export default class PowerSelector extends React.Component<IProps, IState> {
         }
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         let picker;
         const label = typeof this.props.label === "undefined" ? _t("Power level") : this.props.label;
         if (this.state.custom) {