'ReactDOM' is not defined no-undef - reactjs

Question

index.js is as follows:
import './index.css';
import { render } from "react-dom";
const { React } = require('react');
const { App } = require('./App');
const { serviceWorker } = require('./serviceWorker');
ReactDOM.render( < App / > , document.getElementById('root'));
serviceWorker.unregister();
and app.jsx is as follows:
import React from "react";
import"./App.scss";
import { Login, Register } from "./components/login/index";
export class App extends React.Component {
constructor(props) {
super(props);
this.state = {
isLoginActive : true
};
}
componentDidMount() {
this.rightSide.classList.add("right");
}
changeState() {
const { isLoginActive } = this.state;
if (isLoginActive) {
this.rightSide.classList.remove("right");
this.rightSide.classList.add("left");
}else{
this.rightSide.classList.remove("left");
this.rightSide.classList.add("right");
}
this.setState(prevState => ({
isLoginActive: !prevState.isLoginActive
}));
}
render() {
const { isLoginActive } = this.state;
const current = isLoginActive ? "Register" : "Login";
const currentActive = isLoginActive ? "Login" : "Register";
return (
<div className="App">
<div className = "login">
<div className = "container" ref={ref => (this.container = ref)}>
{isLoginActive && (
<Login containerRef={ref => (this.current = ref)} />
)}
{!isLoginActive && (
<Register containerRef={ref => {this.current = ref}} />
)}
</div>
<RightSide
current={current}
currentActive={currentActive}
containerRef={ref => (this.rightSide = ref)}
onClick={this.changeState.bind(this)}
/>
</div>
</div>
);
}
}
const RightSide = props => {
return (
<div
className = "right-side"
ref={props.containerRef}
onClick={props.onClick}
>
<div className="inner-container">
<div className="text">{props.current}</div>
</div>
</div>
);
};
export default App;
on "npm start" I get the following error:
Failed to Compile
src\index.js
Line 14:1: 'ReactDOM' is not defined no-undef
Search for the keywords to learn more about each error.
my React and ReactDOM are up to date and compatible.
I am unable to figure out the solution to this issue.
Any kind of assistance would be appreciated.
Thanks!!

Answer 1

You have to correct the import statement of react-dom like below.
import ReactDOM from "react-dom";

Answer 2

you have to import it:
https://reactjs.org/docs/react-dom.html
import ReactDOM from 'react-dom'

Answer 3

Check for typo.
I got the same error, it was because of the difference between ReactDom and ReactDOM.
import ReactDom from 'react-dom';
ReactDOM.render