CodePen empty rendering - React

Hi community! I am trying to deploy a react app into Code Pen to submit as a project.
I saw other forum posts about this but it didn’t help.

Problem: My code pen is not rendering properly when I input the files because of the single file rule.

I tried root.render as shown, I also tried the ReactDOM.render(<App />,document.getElementById('root'));
But both don’t work. I am sure I made a small dumb mistake somewhere so I would love the community to help me out

My app: Random Quote Machine
Codepen: https://codepen.io/anasrustom/pen/MWLoqWm

ReactDOM.render is no longer supported in React 18. Use createRoot instead.

import { createRoot } from "https://esm.sh/react-dom/client";
const root = createRoot(document.getElementById('root'));
root.render(<App />);

It seems to be fixed.


Just as an FYI React 18 does support the old render.

There are known incompatibilities between React 18 and the tests and we suggest using the old render to make sure any failing tests are not caused by the incompatibility. It is just an easy way to revert back to React 17 behavior without having to downgrade React.

This is the error you get when using ReactDOM.render. Take note of the last part of it.

ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it’s running React 17.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.