codespaces-project-template-js icon indicating copy to clipboard operation
codespaces-project-template-js copied to clipboard

Replaced deprecated render with createRoot

Open adrien-dimitri opened this issue 7 months ago • 0 comments

Hello, @alfredodeza , there was an issue with render after they deprecated it with React 18. I have had issues with it myself and it was causing my deployed page to be blank. Issue#132 mentioned this exact same problem and i provided an easy fix.

Actually, only index.js needed to be updated and after some saerching, I found the fix and wanted to create a pull request.

Original:

/**
 * Entry point of application, where App is rendered within the div with the id of "app" 
 */

import React from "react";
import { render } from "react-dom";

import App from "./App";

render(<App></App>, document.getElementById("app"));

Fixed:

/**
 * Entry point of application, where App is rendered within the div with the id of "app" 
 */

import React from "react";
import { createRoot } from "react-dom/client";

import App from "./App";

const container = document.getElementById("app");
const root = createRoot(container);
root.render(<App />);

adrien-dimitri avatar Aug 02 '24 20:08 adrien-dimitri