React Error: Target container is not a DOM element

import React from 'react';

import ReactDOM from 'react-dom';

class App extends React.Component {

  constructor (props){

    super (props);

    this.state = {lat:null};

    window.navigator.geolocation.getCurrentPosition(

    position => {

      this.setstate({lat:position.coords.latitude});

    },

    err => console.log(err)

  );

  }

  render(){

  return <div>Latitude {this.state.lat}</div>

  }

}

ReactDOM.render(

   <App />, document.getElementById('#root'));

There isn’t an element with the ID #root, I think you meant root – you’re using the function getElementById, IDs don’t have # at the start.

still not working … but ids actually use # anyways tried removing to see if it works …it didnt same issue

Nope, they don’t

<div id="root">
document.getElementById('root');

If you want to select them using CSS or querySelector in JS or similar, you use # but you aren’t doing that.

If that isn’t working, then there isn’t an element with the ID in the HTML

xs

import React from 'react';

import ReactDOM from 'react-dom';

class App extends React.Component {

  constructor (props){

    super (props);

    this.state = {lat:null};

    window.navigator.geolocation.getCurrentPosition(

    position => {

      this.setstate({lat:position.coords.latitude});

    },

    err => console.log(err)

  );

  }

  render(){

  return <div>Latitude {this.state.lat}</div>

  }

}

ReactDOM.render(

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

same error

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

oh thanks noted
will do that next time

What does the HTML look like (the HTML in the browser)

from my chrome inspect? …
sorry if the question isn’t cool bit new in react

No problem. Yep, inspect or just view source – the template from the screenshot has stuff injected into it by Create React App, so can’t see the end result

SORRY FOR LATE REPLY … i actually resstarted the vscode and refreshed browser got new error instead

figured out the setstate should have been setState … appreciate your replies though

2 Likes