I have this error every time I create a new React App-CodePudding

I get this error every time I create a new React App and I don't know how to fit it. Can anybody help me, please?

Error:

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. Learn more: https://reactjs.org/link/switch-to-createroot

EDIT: I created my react app using: npx create-react-app my-app

CodePudding user response：

As your error states ReactDOM.render is no longer supported. So use the new createRoot. As you can see from the code below, (which was pulled from the docs) all you have to do is replace ReactDOM.render with createRoot.

// Before
import { render } from 'react-dom';
const container = document.getElementById('app');
render(<App tab="home" />, container);

// After
import { createRoot } from 'react-dom/client';
const container = document.getElementById('app');
const root = createRoot(container);
root.render(<App tab="home" />);

CodePudding user response：

In your file index.js change to:

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";

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