CODEWITHSUNDEEP
reactjs
Xhonor
Xhonor

Reputation: 59

Error: Target container is not a DOM element

Little by little I began to study React. Faced a stupid problem, I do not know how to solve it. How to make my code work? Now it’s clear that const About is also added via the DOM, and the tick() function cannot detect div.

about.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

const About = () => (
    <div>
        <div id="lol">
            <h1>AHJAHAHAHHAHAHAHAHAH</h1>
        </div>
        <div id="asd">
            asdasd
        </div>
    </div>
);

function tick() {
    const element = (
        <div>
            <h2>{new Date().toLocaleTimeString()}</h2>
        </div>
    );
    ReactDOM.render(element, document.getElementById('lol'));
}

tick();
setInterval(tick, 1000);


export default About;

Error line:

ReactDOM.render(element, document.getElementById('lol'));

Upvotes: 0

Views: 157

Answers (1)

James Grimshaw
James Grimshaw

Reputation: 307

You're trying to target the div #lol in the About function, but the only code you're processing with React is the code in the tick() function, and everything else is being ignored. The target element in the React.render() function should be in public/index.html.

index.html

 <html>
   <body>
     <div id="lol"></div>
   </body>
 <html>

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

function tick() {
  const element = (
    <div>
        <h2>{new Date().toLocaleTimeString()}</h2>
    </div>
  );

  ReactDOM.render(element, document.getElementById('lol'));
}

tick();
setInterval(tick, 1000);

Upvotes: 1

Related Questions