Breaking News: Grepper is joining You.com. Read the official announcement!

Deprecation notice: ReactDOM.render is no longer supported in React 18

Add Answer

Bad Buzzard answered on April 1, 2022 Popularity 8/10 Helpfulness 4/10

answer Deprecation notice: ReactDOM.render is no longer supported in React 18

related ReactDOM.render is no longer supported in React 18

related Warning: ReactDOM.render is no longer supported in React 18.

Deprecation notice: ReactDOM.render is no longer supported in React 18

Comment

Deprecation notice: ReactDOM.render is no longer supported in React 18


For typescript go with the below:

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

Popularity 8/10 Helpfulness 4/10 Language javascript

Source: Grepper

Tags: javascript react-18

Link to this answer
Share Copy Link

Contributed on Sep 26 2022

Bad Buzzard

0 Answers Avg Quality 2/10

Closely Related Answers

ReactDOM.render is no longer supported in React 18

Comment

// 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" />);

Popularity 10/10 Helpfulness 7/10 Language javascript

Source: itsjavascript.com

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Apr 01 2022

Gorgeous Gazelle

0 Answers Avg Quality 2/10

ReactDOM.render is no longer supported in React 18

Comment

import * as ReactDOMClient from 'react-dom/client';
import App from 'App';

const container = document.getElementById('app');

// Create a root.
const root = ReactDOMClient.createRoot(container);

// Initial render: Render an element to the root.
root.render(<App tab="home" />);

// During an update, there's no need to pass the container again.
root.render(<App tab="profile" />);

Popularity 10/10 Helpfulness 4/10 Language javascript

Source: itsjavascript.com

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Apr 05 2022

Gorgeous Gazelle

0 Answers Avg Quality 2/10

ReactDOM.render is no longer supported in React 18

Comment

import * as ReactDOM from 'react-dom';
import App from 'App';

const container = document.getElementById('app');

// Initial render.
ReactDOM.render(<App tab="home" />, container);

// During an update, React would access
// the root of the DOM element.
ReactDOM.render(<App tab="profile" />, container);

Popularity 10/10 Helpfulness 3/10 Language javascript

Source: itsjavascript.com

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Apr 01 2022

Gorgeous Gazelle

0 Answers Avg Quality 2/10

Warning: ReactDOM.render is no longer supported in React 18.

Comment

import { createRoot } from 'react-dom';

// Example component to render
function App() {
  return (
    <div>
      <h1>Hello, World!</h1>
    </div>
  );
}

// Find the root element in the DOM
const rootElement = document.getElementById('root');

// Use createRoot() to render the component onto the DOM
createRoot(rootElement).render(<App />);

Popularity 6/10 Helpfulness 2/10 Language javascript

Source: Grepper

Link to this answer
Share Copy Link

Contributed on Sep 11 2023

YOU.com

0 Answers Avg Quality 2/10

Deprecation notice: ReactDOM.render is no longer supported in React 18

Contents

More Related Answers

Deprecation notice: ReactDOM.render is no longer supported in React 18

Closely Related Answers

ReactDOM.render is no longer supported in React 18

ReactDOM.render is no longer supported in React 18

ReactDOM.render is no longer supported in React 18

Warning: ReactDOM.render is no longer supported in React 18.

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.