Merge pull request #65 from contentstack/fix/updated-render-method

fix:updated render method

Author: Amitkanswal

ui/src/components/jsoneditor/index.tsx

@@ -1,4 +1,4 @@
-import React, { useRef, useEffect } from "react";
+import React, { useRef } from "react";
 import { JsonEditor } from "jsoneditor-react";
 import ace from "brace";
 import "brace/mode/json";
@@ -13,10 +13,6 @@ const JSONEditor: React.FC<TypeJsonProps> = function ({
 }) {
   const jsonEditorRef = useRef<JsonEditor | null>(null);
 
-  useEffect(() => {
-    jsonEditorRef?.current?.set(value);
-  }, [value]);
-
   const setRef = (instance: any) => {
     jsonEditorRef.current = instance?.jsonEditor;
   };

ui/src/index.tsx

@@ -1,6 +1,6 @@
 /* Import React modules */
 import React from "react";
-import ReactDOM from "react-dom";
+import { createRoot } from "react-dom/client";
 /* Import other node modules */
 import reportWebVitals from "./reportWebVitals";
 /* Import our modules */
@@ -9,14 +9,15 @@ import App from "./containers/App";
 /* Import our CSS */
 import "./index.css";
 
-ReactDOM.render(
+const container = document.getElementById("root") as HTMLElement;
+const root = createRoot(container); // createRoot(container!) if you use TypeScript
+root.render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>,
-  document.getElementById("root")
+  </React.StrictMode>
 );
 
 // If you want to start measuring performance in your app, pass a function
 // to log results (for example: reportWebVitals(console.log))
 // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();
+reportWebVitals();