React 18

package.json

@@ -37,8 +37,8 @@
     "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-jest": "^27.2.1",
     "eslint-plugin-jsx-a11y": "^6.7.1",
-    "eslint-plugin-react": "^7.32.1",
-    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react": "^7.36.1",
+    "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-testing-library": "^5.10.0",
     "eslint-webpack-plugin": "^3.2.0",
     "file-loader": "^6.2.0",
@@ -63,14 +63,14 @@
     "preval.macro": "^5.0.0",
     "process": "^0.11.10",
     "prompts": "2.4.2",
-    "react": "^17.0.2",
-    "react-app-polyfill": "^2.0.0",
+    "react": "^18.3.1",
+    "react-app-polyfill": "^3.0.0",
     "react-dev-utils": "^12.0.1",
-    "react-dom": "^17.0.2",
-    "react-error-boundary": "^3.1.1",
-    "react-i18nify": "^6.0.0",
+    "react-dom": "^18.3.1",
+    "react-error-boundary": "^4.0.13",
+    "react-i18nify": "^6.1.3",
+    "react-refresh": "^0.14.2",
     "react-qrcode-logo": "^3.0.0",
-    "react-refresh": "^0.10.0",
     "react-svg-loader": "^3.0.3",
     "resolve": "^1.22.8",
     "resolve-url-loader": "^5.0.0",
@@ -116,8 +116,8 @@
     "@types/lodash-es": "^4.17.12",
     "@types/node": "^22.5.4",
     "@types/preval.macro": "^3.0.2",
-    "@types/react": "^17.0.53",
-    "@types/react-dom": "^17.0.18",
+    "@types/react": "^18.3.7",
+    "@types/react-dom": "^18.3.0",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.8.0",
     "autoprefixer": "^10.4.20",
     "compression-webpack-plugin": "^11.1.0",
@@ -135,7 +135,7 @@
     "postcss": "^8.4.45",
     "postcss-loader": "^7.0.2",
     "prettier": "^2.2.1",
-    "react-test-renderer": "^17.0.2",
+    "react-test-renderer": "^18.3.1",
     "resize-observer-polyfill": "^1.5.1",
     "style-loader": "^3.3.1",
     "tailwindcss": "^3.2.7",

src/app/Marine2/components/ui/Modal/Modal.tsx

@@ -40,7 +40,11 @@ const Body: FC<BodyProps> = ({ children, className, variant = "default" }) => {
   return <div className={classes}>{children}</div>
 }
 
-const Footer: FC = ({ children }) => (
+interface FooterProps {
+  children: ReactNode
+}
+
+const Footer: FC<FooterProps> = ({ children }) => (
   <div className="flex justify-between border-t border-victron-darkGray-200 text-base">{children}</div>
 )
 

src/app/Marine2/components/ui/OptionList/OptionList.tsx

@@ -1,5 +1,8 @@
-import { FC } from "react"
+import { FC, ReactNode } from "react"
 
-export const OptionList: FC = ({ children }) => (
+interface OptionListProps {
+  children: ReactNode
+}
+export const OptionList: FC<OptionListProps> = ({ children }) => (
   <div className="divide-y divide-victron-darkGray-200 text-base">{children}</div>
 )

src/app/Marine2/components/ui/OptionList/RadioOption/RadioOption.tsx

@@ -1,11 +1,12 @@
-import { FC } from "react"
+import { FC, ReactNode } from "react"
 import RadioButton from "../../RadioButton"
 
 interface Props {
   mode: number
   onChange: (arg: number) => void
   key: string
   value: number
+  children: ReactNode
 }
 
 export const RadioOption: FC<Props> = ({ mode, onChange, value, children }) => (

src/app/MarineApp/components/HeaderView/HeaderView.tsx

@@ -6,6 +6,7 @@ const MAX_TITLE_LENGTH = 40
 
 type HeaderViewProps = {
   child?: boolean
+  children?: React.ReactNode
   icon: string
   title?: string
   subTitle?: string

src/app/MarineApp/components/ListView/ListView.tsx

@@ -8,6 +8,7 @@ type ListViewProps = {
   icon: string
   title: string | React.ReactNode
   subTitle: string | React.ReactNode
+  children: React.ReactNode
 }
 
 export const ListView: React.FunctionComponent<ListViewProps> = ({ child, icon, title, subTitle, children }) => (

src/app/MarineApp/components/SelectorButton/SelectorButton.tsx

@@ -12,6 +12,7 @@ type SelectorButtonProps = {
   onClick: Function
   className?: string
   alwaysUnlocked?: boolean
+  children: React.ReactNode
 }
 
 // Keep as class component to allow refs

src/app/components/Card/Card.tsx

@@ -21,6 +21,7 @@ type CardProps = {
   onIconClick?: Function
   footer?: Footer
   infoText?: string
+  children: ReactNode
   className?: string
 }
 

src/app/components/Modal/Modal.tsx

@@ -1,10 +1,11 @@
 import "./Modal.scss"
-import { FunctionComponent } from "react"
+import { FunctionComponent, ReactNode } from "react"
 import { Card, SIZE_WIDE, ICON_CLOSE } from "../Card"
 
 type ModalProps = {
   title: string
   onClose: Function
+  children: ReactNode
   cardProps?: any
 }
 

src/index.tsx

@@ -1,6 +1,6 @@
 import "react-app-polyfill/stable"
 import React from "react"
-import ReactDOM from "react-dom"
+import { createRoot } from "react-dom/client"
 import { getParameterByName } from "./app/utils/util"
 import registerServiceWorker from "./serviceWorkerRegistration"
 import * as Sentry from "@sentry/react"
@@ -80,7 +80,10 @@ Sentry.init({
   },
 })
 
-ReactDOM.render(<React.StrictMode>{getApp()}</React.StrictMode>, document.getElementById("root"))
+const container = document.getElementById("root")
+const root = createRoot(container!)
+
+root.render(<React.StrictMode>{getApp()}</React.StrictMode>)
 
 registerServiceWorker()