Warning:: ReactDOM.render is no longer supported in React 18. Use createRoot instead [duplicate]

Question

I was trying to connect my react app to a Mongodb database but this happened.

//index.js
ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById("root")
);

Answer 1

In React 18, is needed to:

import { createRoot } from 'react-dom/client';

creates your root container with this function:

const root = createRoot(document.getElementById("root"));

and then render your root app:

root.render(<YourApp />);

you can read this in: https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html

Answer 2

Just replace your code with below in index.js file:

import ReactDOM from "react-dom/client";

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