Error: Target container is not a DOM element BASIC REACTJS

Question

I'm learning React, and I was watching a tutorial in YT (https://youtu.be/7MmncixTZOo), the thing is that I'm just trying to print a text in my main file but doesn't work (the screen remains blank).

This is my package.json (to check versions, I think React syntax is updated, can be?)

I just deleted all the files in the "src" folder and created these two ("index.js" and "App.js").

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';

ReactDOM.render(<App />, document.querySelectorAll('#root'));

App.js

import React from 'react';

const App = () => {
    return <div>App</div>
};

export default App;

I get this error:

(I know that the error gives it because there is not created the element ID "root", but if I believe it, my screen is blank and it doesn't print the text "App").

Can someone lend me a hand? Thanks a lot of!!!

Cheers.

EDIT: This is my index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>

EDIT: Oh, okay ... In index.html, sorry, yes, I update my question :) — Alex Iglesias
– Alex Iglesias, Commented Dec 3, 2020 at 10:30
well you need the <div id='root'/> , can you also show me the message in console? also use ReactDOM.render(<App />, document.getElementById('root')); — claud.io
– claud.io, Commented Dec 3, 2020 at 10:31

Christian LSANGOLA · Accepted Answer · 2020-12-03 10:39:16Z

1

Inside your index.html file in your public folder you should have a code like this <div id='root'></div> where root targets your unique div element.
And in your index.js file you should not call a collection with document.querySelectorAll('#root') because it returns a collection even if only one occurence matches the selector.

Use instead document.querySelector('#root') to target the first selector that is found.

Technically speaking you can event change the id property name into mammy inside your index.html file like this <div id='mammy'></div>.As it mammy in your index.js it will be document.querySelector('#mammy').It just to help you understand how things really work

I hope that it helped

edited Dec 3, 2020 at 10:39

answered Dec 3, 2020 at 10:35

Christian LSANGOLA

3,3256 gold badges28 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Martin Z Over a year ago

Great and clear answer! And to add to that I think you might need to add paranthesis to your return statement in the App component => return (<div>App</div>).

Alex Iglesias Over a year ago

Thank you!! Now I recieve Line 5:35: 'props' is not defined no-undef, but I'll investigate ...

Talmacel Marian Silviu · Accepted Answer · 2020-12-03 10:29:44Z

1

You have used

document.querySelectorAll

that will return a collection of elements not an element.

You need to use:

document.getElementById('root')

answered Dec 3, 2020 at 10:29

Talmacel Marian Silviu

1,7762 gold badges10 silver badges15 bronze badges

1 Comment

Alex Iglesias Over a year ago

Thanks a lot of man! This is another solution! :)

Collectives™ on Stack Overflow

Error: Target container is not a DOM element BASIC REACTJS

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related