Merge pull request #1320 from data-driven-forms/update-react-dependency-to-18

Update react dependency to 18

Author: Hyperkid123

package.json

@@ -72,12 +72,12 @@
     "@semantic-release/git": "^10.0.1",
     "@semantic-release/github": "^8.0.2",
     "@semantic-release/npm": "^8.0.3",
-    "@testing-library/dom": "^8.11.2",
-    "@testing-library/jest-dom": "^5.16.1",
-    "@testing-library/react": "^12.1.2",
-    "@testing-library/user-event": "^14.1.1",
-    "@types/react": ">=17.0.21",
-    "@types/react-dom": "^17.0.9",
+    "@testing-library/dom": "^8.17.1",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^14.4.3",
+    "@types/react": "^18.0.18",
+    "@types/react-dom": "^18.0.6",
     "@typescript-eslint/eslint-plugin": "^4.31.1",
     "babel-eslint": "^10.1.0",
     "babel-jest": "^27.4.6",
@@ -107,8 +107,8 @@
     "node-sass": "^7.0.1",
     "prettier": "^2.5.1",
     "prop-types": "^15.8.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "regenerator-runtime": "^0.13.9",
     "replace-in-file": "^6.3.2",
     "sass-loader": "^12.4.0",

packages/ant-component-mapper/demo/index.js

@@ -1,31 +1,28 @@
-/* eslint-disable */
-import React, { useState } from 'react';
-import ReactDOM from 'react-dom';
+import React from 'react';
+import { createRoot } from 'react-dom/client';
 import { FormRenderer } from '@data-driven-forms/react-form-renderer';
 import 'antd/dist/antd.css';
 import './style.css';
-import demoSchema from '../../../shared/demoschema';
-import dualListSelectSchema from './demo-schemas/dual-list-select-schema'
 import { componentMapper, FormTemplate } from '../src';
 import wizardSchema from './demo-schemas/wizard-schema';
-import sliderSchema from './demo-schemas/slider-schema';
-import fieldArraySchema from './demo-schemas/field-array-schema';
 
 const style = {
   position: 'relative',
-  width:'70%',
-  margin:'auto'
-}
+  width: '70%',
+  margin: 'auto',
+};
 
 const App = () => (
   <div style={style}>
     <FormRenderer
       componentMapper={componentMapper}
-      FormTemplate={(props) => <FormTemplate layout='vertical' {...props} />}
+      FormTemplate={(props) => <FormTemplate layout="vertical" {...props} />}
       onSubmit={console.log}
       schema={wizardSchema}
     />
   </div>
 );
 
-ReactDOM.render(<App />, document.getElementById('root'));
+const container = document.getElementById('root');
+const root = createRoot(container);
+root.render(<App />);

packages/blueprint-component-mapper/demo/index.js

@@ -1,6 +1,6 @@
-/* eslint-disable */
+/* eslint-disable no-unused-vars */
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom';
 import FormRenderer from '@data-driven-forms/react-form-renderer/form-renderer';
 import { arraySchemaDDF } from './demo-schemas/widget-schema';
 import { componentMapper, FormTemplate } from '../src';
@@ -10,7 +10,7 @@ import {
   wizardSchemaWithFunction,
   wizardSchemaSimple,
   wizardSchemaSubsteps,
-  wizardSchemaMoreSubsteps
+  wizardSchemaMoreSubsteps,
 } from './demo-schemas/wizard-schema';
 import sandboxSchema from './demo-schemas/sandbox';
 import demoSchema from '../../../shared/demoschema';
@@ -23,9 +23,9 @@ const fieldArrayState = {
   additionalOptions: {
     initialValues: {
       number: [1, 2, 3, 4],
-      minMax: [null, null, null, null]
-    }
-  }
+      minMax: [null, null, null, null],
+    },
+  },
 };
 
 class App extends React.Component {
@@ -51,7 +51,7 @@ class App extends React.Component {
             onSubmit={console.log}
             componentMapper={{
               ...componentMapper,
-              summary: Summary
+              summary: Summary,
             }}
             FormTemplate={(props) => <FormTemplate {...props} showFormControls={this.state.additionalOptions.showFormControls} />}
             onCancel={console.log}
@@ -64,4 +64,6 @@ class App extends React.Component {
   }
 }
 
-ReactDOM.render(<App />, document.getElementById('root'));
+const container = document.getElementById('root');
+const root = createRoot(container);
+root.render(<App />);

packages/carbon-component-mapper/demo/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { FormRenderer } from '@data-driven-forms/react-form-renderer';
 import { arraySchemaDDF } from './demo-schemas/widget-schema';
 import { componentMapper, FormTemplate } from '../src';
@@ -14,9 +14,9 @@ const fieldArrayState = {
   additionalOptions: {
     initialValues: {
       number: [1, 2, 3, 4],
-      minMax: [null, null, null, null]
-    }
-  }
+      minMax: [null, null, null, null],
+    },
+  },
 };
 
 class App extends React.Component {
@@ -54,4 +54,6 @@ class App extends React.Component {
   }
 }
 
-ReactDOM.render(<App />, document.getElementById('root'));
+const container = document.getElementById('root');
+const root = createRoot(container);
+root.render(<App />);

packages/mui-component-mapper/demo/index.js

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { FormRenderer, componentTypes } from '@data-driven-forms/react-form-renderer';
 
 import Grid from '@mui/material/Grid';
@@ -170,4 +170,6 @@ const App = () => {
   );
 };
 
-ReactDOM.render(<App />, document.getElementById('root'));
+const container = document.getElementById('root');
+const root = createRoot(container);
+root.render(<App />);