javascript - React Js: mountNode is not defined no-undef error - Stack Overflow

admin管理员组

文章数量:1344595

I am newly learning the React Js. I found the example at this Link. But when I tried the first code:

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import ReactDOM from 'react-dom';

class HelloMessage extends React.Component {
  render() {
    return (
      <div>
        Hello {this.props.name}
      </div>
    );
  }
}

ReactDOM.render(
  <HelloMessage name="Taylor" />,
  mountNode
);
export default HelloMessage;

I am getting this error

./src/App.js Line 18: 'mountNode' is not defined no-undef

Search for the keywords to learn more about each error.

I have already seen the answer at this StackOverflow link. But I'm sorry I couldn't get what is explained there. Provide me the suggestions. Thank you in advance!

I am newly learning the React Js. I found the example at this Link. But when I tried the first code:

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import ReactDOM from 'react-dom';

class HelloMessage extends React.Component {
  render() {
    return (
      <div>
        Hello {this.props.name}
      </div>
    );
  }
}

ReactDOM.render(
  <HelloMessage name="Taylor" />,
  mountNode
);
export default HelloMessage;

I am getting this error

./src/App.js Line 18: 'mountNode' is not defined no-undef

Search for the keywords to learn more about each error.

I have already seen the answer at this StackOverflow link. But I'm sorry I couldn't get what is explained there. Provide me the suggestions. Thank you in advance!

• javascript
• reactjs

Share Improve this question Follow edited Jan 12, 2018 at 6:31 Vikas Yadav 3,35422 gold badges2222 silver badges2222 bronze badges asked Jan 12, 2018 at 5:17 BharathRaoBharathRao 2,06611 gold badge2121 silver badges3131 bronze badges 3

• Even If I keep the <div id="app"> and at the ReactDOM.render( <HelloMessage name="Taylor" />, document.getElementById("app") ); Its giving me the error Target container is not a DOM element. – BharathRao Commented Jan 12, 2018 at 5:21
• Please post your HTML code as well – klugjo Commented Jan 12, 2018 at 5:24
• @BharathRao As Klugjo in his answer stated you need to define mountNode, but whatever id that you are using for mountNode must be present in your HTML element – Shubham Khatri Commented Jan 12, 2018 at 5:50

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

The error message you are getting is a linting error. (static code analysis)

Make sure your mountNode variable exists.

or use something like:

render(<HelloMessage />, document.getElementById('app'));

Also make sure that you have a DOM element with id app in your HTML code:

for example:

<div id="app" />

The ReactDOM.render() method is already located under

src/index.js

like:

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

The above code renders over ponent in the root div located in the public/index.html

src/App.js

--->initially it looked like:

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Wele to React</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    );
  }
}

export default App;

Finally --> Now instead of rendering the App Component...we can either write the HelloMessage ponent under the same file or replace the App Component with something like this..

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <div>
        Hello {this.props.name}
        </div>
      </div>
    );
  }
}

After that I'm able to see the Hello Message in the browser localhost:3000. But the Name Taylor is not displayed there...So what I did is passed the name props from the index.js file something like:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
//Passed the name props to the
ReactDOM.render(<App name = "Taylor"/>, document.getElementById('root'));
registerServiceWorker();

Now After this point I got the successful output Hello Taylor. If you are replacing the App ponent with HelloMessage ponent, don't forget to import that file in the index.js

本文标签： javascriptReact Js mountNode is not defined noundef errorStack Overflow