Update react and react-dom

6 files changed, 9 insertions, 5 deletions

diff --git a/gui/src/renderer/components/ErrorBoundary.tsx b/gui/src/renderer/components/ErrorBoundary.tsx
index 7014175ffa..40615e44f4 100644
--- a/gui/src/renderer/components/ErrorBoundary.tsx
+++ b/gui/src/renderer/components/ErrorBoundary.tsx
@@ -33,7 +33,7 @@ export default class ErrorBoundary extends React.Component<IProps, IState> {
 
   public render() {
     if (this.state.hasError) {
-      const reachBackMessage: React.ReactNodeArray =
+      const reachBackMessage: React.ReactNode[] =
         // TRANSLATORS: The message displayed to the user in case of critical error in the GUI
         // TRANSLATORS: Available placeholders:
         // TRANSLATORS: %(email)s - support email
diff --git a/gui/src/renderer/components/LocationList.tsx b/gui/src/renderer/components/LocationList.tsx
index 729cb59f3c..19c3eca0a5 100644
--- a/gui/src/renderer/components/LocationList.tsx
+++ b/gui/src/renderer/components/LocationList.tsx
@@ -43,6 +43,7 @@ interface ILocationListProps<SpecialValueType> {
   selectedValue?: LocationSelection<SpecialValueType>;
   selectedElementRef?: React.Ref<React.ReactInstance>;
   onSelect?: (value: LocationSelection<SpecialValueType>) => void;
+  children?: React.ReactNode;
 }
 
 export default class LocationList<SpecialValueType> extends React.Component<
@@ -244,6 +245,7 @@ interface ISpecialLocationProps<T> {
   onSelect?: (value: T) => void;
   info?: string;
   forwardedRef?: React.Ref<HTMLButtonElement>;
+  children?: React.ReactNode;
 }
 
 export class SpecialLocation<T> extends React.Component<ISpecialLocationProps<T>> {
diff --git a/gui/src/renderer/components/Login.tsx b/gui/src/renderer/components/Login.tsx
index 0b30b1c167..6c69074a0c 100644
--- a/gui/src/renderer/components/Login.tsx
+++ b/gui/src/renderer/components/Login.tsx
@@ -379,7 +379,7 @@ function AccountDropdownItem(props: IAccountDropdownItemProps) {
   }, [props.onSelect, props.value]);
 
   const handleRemove = useCallback(
-    (event) => {
+    (event: React.MouseEvent<HTMLButtonElement>) => {
       // Prevent login form from submitting
       event.preventDefault();
       props.onRemove(props.value);
diff --git a/gui/src/renderer/components/ProblemReport.tsx b/gui/src/renderer/components/ProblemReport.tsx
index c2e501e109..aa89365fd5 100644
--- a/gui/src/renderer/components/ProblemReport.tsx
+++ b/gui/src/renderer/components/ProblemReport.tsx
@@ -385,7 +385,7 @@ export default class ProblemReport extends React.Component<
   }
 
   private renderSent() {
-    const reachBackMessage: React.ReactNodeArray =
+    const reachBackMessage: React.ReactNode[] =
       // TRANSLATORS: The message displayed to the user after submitting the problem report, given that the user left his or her email for us to reach back.
       // TRANSLATORS: Available placeholders:
       // TRANSLATORS: %(email)s
diff --git a/gui/src/renderer/components/TransitionContainer.tsx b/gui/src/renderer/components/TransitionContainer.tsx
index 22ef1665eb..5fbfe61a55 100644
--- a/gui/src/renderer/components/TransitionContainer.tsx
+++ b/gui/src/renderer/components/TransitionContainer.tsx
@@ -6,6 +6,7 @@ import { WillExit } from '../lib/will-exit';
 
 interface ITransitioningViewProps {
   viewId: string;
+  children?: React.ReactNode;
 }
 
 type TransitioningView = React.ReactElement<ITransitioningViewProps>;
diff --git a/gui/src/renderer/index.ts b/gui/src/renderer/index.ts
index 815095408f..fbf8ebcdba 100644
--- a/gui/src/renderer/index.ts
+++ b/gui/src/renderer/index.ts
@@ -1,7 +1,8 @@
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 
 import App from './app';
 
 const app = new App();
 const container = document.getElementById('app');
-ReactDOM.render(app.renderView(), container);
+const root = createRoot(container!);
+root.render(app.renderView());