Gil Gil - 2 months ago 8
React JSX Question

React | Multiple render

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

index.html
multiple
<div id = "x" /> <div id = "y" />
with REACT, i mean.. i have all my site on
index.html
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


HTML


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



JSX


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
<h1>Test</h1>
... why?

Answer

I created a JSFiddle to try a few things out here: http://jsfiddle.net/pof580fd/1/

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: https://www.w3.org/TR/html5/syntax.html#void-elements) 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)

Comments