[Solved] ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API

Today, I am trying to run my reactjs project But Unfortunately, I am facing the following error: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API in ReactJS. We are going to Learn about All Possible Solutions So Lets Get Start with This Article.

How ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API Error Occurs?

Today, I am trying to run my reactjs project But Unfortunately, I am facing the following error:

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

So here I am writing all the possible solutions that I have tried to resolve this error.

How To Solve ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API Error?

Solution 1: Upgrade to React 18

First Of all, Install the latest version of React Just Run This command npm install react react-dom then Update your Client Rendering APIs Just Modify Your index.js to work with React 18 syntax. As Just Given Below.

// 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); // createRoot(container!) if you use TypeScript
root.render(<App tab="home" />);

import React from 'react';

import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

import { createRoot } from 'react-dom/client';
const container = document.getElementById('root');
const root = createRoot(container);

root.render(
<React.StrictMode>
  <App />
</React.StrictMode>);

reportWebVitals();

Now, Your error must be solved. Thank You.

Summary

It’s all About this error. Hope We solved Your error. Comment below Your thoughts and your queries. Also, Comment below which solution worked for you?

Also, Read

• SyntaxError: invalid syntax to repo init in the AOSP code.