Newbie react question: Target container is not a DOM element when calling react from html

Question

My plan is to have a html call a react component (to test the react component, so the 1st thing i'm trying is a react class.

This is my the react file

class Hello extends React.Component {
    render() {
        return React.createElement("h1", {}, "Hello ");
    }
}

const HelloElement = React.createElement(Hello, {name: "World"});
ReactDOM.render(HelloElement, document.getElementById('mydiv'));

This is the html file,

<!DOCTYPE html>
<html>
<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/[email protected]/babel.min.js"></script>

<body>

<script src="Hello.js"></script>
<div id="mydiv"></div>

</body>
</html>

But i get Error Decoder which is Target container is not a DOM element.

How to fix this pls ?

Your import order is wrong. Put your <script/> tag after the div declaration. — Samuel Gonçalves
– Samuel Gonçalves, Commented Feb 14, 2020 at 23:16

Michael · Accepted Answer · 2020-02-15 01:04:57Z

1

Samuel already wrote it in his comment... you need to put the <script src="Hello.js"> behind the div

The code executes in order, so when Hello.js runs, the div with id='mydiv' doesn't exist yet. Otherwise your code works just fine. All you need is to make use of that name prop.

class Hello extends React.Component {
  render() {
        return React.createElement("h1", {}, "Hello " + this.props.name);
  }
}
const HelloElement = React.createElement(Hello, {name: "World"});
ReactDOM.render(HelloElement, document.getElementById('mydiv'));

<!DOCTYPE html>
<html>
<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<body>
<div id="mydiv"></div>
</body>
</html>

As you use React.createElement instead of JSX you also don't need Babel so far.

answered Feb 15, 2020 at 1:04

Michael

9588 silver badges19 bronze badges

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

1 Comment

user3552178 Over a year ago

A follow up question, in the render(), if i change to return (<h2>h4</h2>); it says "Unexpected token <", how to fix it pls ?

Collectives™ on Stack Overflow

Newbie react question: Target container is not a DOM element when calling react from html

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related