replace ReactDOM.render() with createRoot() for React 18 compatibility

changelog/fix-7074

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Replaced deprecated ReactDOM.render() with createRoot() for React 18 compatibility.

client/checkout/woopay/connect/woopay-connect.js

@@ -110,7 +110,7 @@ class WoopayConnect {
 			self.listeners.getIframePostMessageCallback = resolve;
 		} );
 
-		ReactDOM.render( <WooPayConnectIframe />, hiddenDiv );
+		ReactDOM.createRoot( hiddenDiv ).render( <WooPayConnectIframe /> );
 	}
 
 	/**

client/checkout/woopay/express-button/index.js

@@ -37,7 +37,7 @@ const renderWooPayExpressCheckoutButton = ( listenForCartChanges = {} ) => {
 
 		oldWoopayContainers.push( woopayContainer );
 
-		ReactDOM.render(
+		ReactDOM.createRoot( woopayContainer ).render(
 			<WoopayExpressCheckoutButton
 				listenForCartChanges={ listenForCartChanges }
 				buttonSettings={ getConfig( 'woopayButton' ) }
@@ -46,8 +46,7 @@ const renderWooPayExpressCheckoutButton = ( listenForCartChanges = {} ) => {
 					!! woopayContainer.getAttribute( 'data-product_page' )
 				}
 				emailSelector="#billing_email"
-			/>,
-			woopayContainer
+			/>
 		);
 	}
 };

client/checkout/woopay/index.js

@@ -49,9 +49,8 @@ const renderSaveUserSection = () => {
 			}
 		}
 
-		ReactDOM.render(
-			<CheckoutPageSaveUser isBlocksCheckout={ true } />,
-			checkoutPageSaveUserContainer
+		ReactDOM.createRoot( checkoutPageSaveUserContainer ).render(
+			<CheckoutPageSaveUser isBlocksCheckout={ true } />
 		);
 	} else {
 		const checkoutPageSaveUserContainer = document.createElement( 'div' );
@@ -69,9 +68,8 @@ const renderSaveUserSection = () => {
 				placeOrderButton
 			);
 
-			ReactDOM.render(
-				<CheckoutPageSaveUser isBlocksCheckout={ false } />,
-				checkoutPageSaveUserContainer
+			ReactDOM.createRoot( checkoutPageSaveUserContainer ).render(
+				<CheckoutPageSaveUser isBlocksCheckout={ false } />
 			);
 		}
 	}

client/order/index.js

@@ -110,7 +110,7 @@ jQuery( function ( $ ) {
 			return;
 		}
 
-		ReactDOM.render(
+		ReactDOM.createRoot( container ).render(
 			<>
 				{ testMode && <TestModeNotice /> }
 
@@ -120,8 +120,7 @@ jQuery( function ( $ ) {
 						onDisableOrderRefund={ disableWooOrderRefundButton }
 					/>
 				) }
-			</>,
-			container
+			</>
 		);
 	}
 } );

client/payment-gateways/index.js

@@ -13,8 +13,7 @@ const paymentGatewaysContainer = document.getElementById(
 	'wcpay-payment-gateways-container'
 );
 if ( paymentGatewaysContainer ) {
-	ReactDOM.render(
-		<PaymentGatewaysConfirmation />,
-		paymentGatewaysContainer
+	ReactDOM.createRoot( paymentGatewaysContainer ).render(
+		<PaymentGatewaysConfirmation />
 	);
 }

client/plugins-page/index.js

@@ -102,7 +102,6 @@ const PluginsPage = () => {
 	);
 };
 
-ReactDOM.render(
-	<PluginsPage />,
+ReactDOM.createRoot(
 	document.querySelector( '#woopayments-plugins-page-app' )
-);
+).render( <PluginsPage /> );

client/settings/index.js

@@ -21,13 +21,12 @@ const settingsContainer = document.getElementById(
 	'wcpay-account-settings-container'
 );
 if ( settingsContainer ) {
-	ReactDOM.render(
+	ReactDOM.createRoot( settingsContainer ).render(
 		<WCPaySettingsContext.Provider value={ wcpaySettings }>
 			<ErrorBoundary>
 				<SettingsManager />
 			</ErrorBoundary>
-		</WCPaySettingsContext.Provider>,
-		settingsContainer
+		</WCPaySettingsContext.Provider>
 	);
 }
 
@@ -37,12 +36,11 @@ const expressCheckoutSettingsContainer = document.getElementById(
 if ( expressCheckoutSettingsContainer ) {
 	const methodId = expressCheckoutSettingsContainer.dataset.methodId;
 
-	ReactDOM.render(
+	ReactDOM.createRoot( expressCheckoutSettingsContainer ).render(
 		<WCPaySettingsContext.Provider value={ wcpaySettings }>
 			<ErrorBoundary>
 				<ExpressCheckoutSettings methodId={ methodId } />
 			</ErrorBoundary>
-		</WCPaySettingsContext.Provider>,
-		expressCheckoutSettingsContainer
+		</WCPaySettingsContext.Provider>
 	);
 }

client/tos/index.js

@@ -34,5 +34,5 @@ function renderTosModal() {
 	const container = document.createElement( 'div' );
 	container.id = 'wcpay-tos-container';
 	document.body.appendChild( container );
-	ReactDOM.render( <TosModal />, container );
+	ReactDOM.createRoot( container ).render( <TosModal /> );
 }

includes/multi-currency/client/index.js

@@ -50,7 +50,6 @@ const MultiCurrencySettingsPage = () => {
 	);
 };
 
-ReactDOM.render(
-	<MultiCurrencySettingsPage />,
+ReactDOM.createRoot(
 	document.querySelector( '#wcpay_multi_currency_settings_container' )
-);
+).render( <MultiCurrencySettingsPage /> );