-1

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!!

Mayank
  • 11
  • 1
  • 3

3 Answers3

1

You have to correct the import statement of react-dom like below.

import ReactDOM from "react-dom";
vishwas meshram
  • 306
  • 1
  • 5
0

you have to import it:

https://reactjs.org/docs/react-dom.html

import ReactDOM from 'react-dom'
Noriller
  • 342
  • 1
  • 4
  • 12
  • Hi implemented your correction and still to no avail. After running npm start it still displays the same error!! – Mayank Jun 27 '21 at 12:18
0

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

Sebastien
  • 1
  • Read careful the question before answering, he is not importing the default export: `import { render } from "react-dom"` hence he has to call the render method directly, not doing `ReactDOM.render`. – Cesare Polonara Apr 09 '22 at 14:17