Gil Gil - 1 year ago 126
React JSX Question

React | Multiple render

I just want to know if there is any way I can "draw" in my

<div id = "x" /> <div id = "y" />
with REACT, i mean.. i have all my site on
with all my template, so i only need to use REACT on an specifics sections...

enter image description here

i tried this i didnt work


<div id="test" />
<div id="app" />
<script src="public/bundle.js" charset="utf-8"></script>


import React from 'react';
import {render} from 'react-dom';

class App extends React.Component {
render () {
return (<h1>App</h1>);
class Test extends React.Component {
render () {
return (<h1>Test</h1>);

render(<App/>, document.getElementById('app'));
render(<Test/>, document.getElementById('test'));

then when i load the page only prints the
... why?

Answer Source

I created a JSFiddle to try a few things out here:

I found out that by explicitly closing each of the <div> tags I could get it to work, i.e.:

<div id="test"></div>
<div id="app"></div>

I did a little research and it appears that as div is not one of the HTML5 "void elements" (Listed here: it is not self-closing and you must use </div>. See this SO question for more details: Are self-closing tags valid in HTML5?

Possibly some browsers are lenient about this (I'm using Chrome 52 right now) - but React is not, it appears. The error message I see in the console is:

Uncaught Error: Invariant Violation: _registerComponent(...): Target container is not a DOM element.

(Make sure you're using the "dev" version of React to see these)

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download