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

const element = <h1>Hello world</h1>
render(element,document.getElementById('root'));

I tried using import { ReactDOM } from "react-dom/client", but still got this waring

react-dom.development.js:86  Warning: 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.
mrtomblue
  • 118
  • 1
  • 11
Emmanuel Riri
  • 1
  • 1
    There was some overlap between v17 and v18 that allowed you to use that render code. Looks like this has now changed and you can't use it any more. [Take a look at the documentation](https://react.dev/learn/add-react-to-an-existing-project#step-1-set-up-a-modular-javascript-environment) on how v18 now requires you to do it. – Andy Aug 02 '23 at 20:54

1 Answers1

1

React 18 renders elements differently than React 17. You're attempting to render your element with an older API, from React 17, so React will use APIs from that older version in order to work properly and render your element.

Change your code to something like this

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

const element = <h1>Hello world</h1>

const root = createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    {element}
  </React.StrictMode>
);

This question has also already been answered before
Deprecation notice: ReactDOM.render is no longer supported in React 18

If you need more information check out the documentation on upgrading to React 18 as it better explains your warning

mrtomblue
  • 118
  • 1
  • 11