React | Multiple render

Question

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...

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?

Are you using the dev version of React? If so, you should be getting some helpful errors in the console. — jmargolisvt
– jmargolisvt, Commented Sep 15, 2016 at 19:35
You cannot do return ( <div>1</div> <div>2</div> ); place them within a parent div, like return ( <div> <div>1</div> <div>2</div> </div> );, What do you see in the developer console? — Dhruv Kumar Jha
– Dhruv Kumar Jha, Commented Sep 15, 2016 at 19:45
You'd get an error message in the console. @Random User is totally right. — jmargolisvt
– jmargolisvt, Commented Sep 15, 2016 at 19:53
wrap your App component in a div as <div><div>1</div><div>2</div></div> — Aatif Bandey
– Aatif Bandey, Commented Sep 16, 2016 at 6:58

Community · Accepted Answer · 2017-05-23 12:16:29Z

1

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 (non-void) 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)

edited May 23, 2017 at 12:16

CommunityBot

11 silver badge

answered Sep 18, 2016 at 22:36

Matt Holland

2,2203 gold badges23 silver badges26 bronze badges

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

1 Comment

Gil Over a year ago

Thanks you! so its the self-closing in the html.

Ngọc Bạch Văn · Accepted Answer · 2016-09-16 06:18:45Z

1

You can create a new component and call from that.

import App from "./App";
import Test from "./Test";
class Program extends React.Component {
  render() {
    <div>
      <div id="app"><App /></div>
      <div id="test"><Test /></div>
    </div>
  }
}

and then call

render(<Program />), document.getElementById('...'));

answered Sep 16, 2016 at 6:18

Ngọc Bạch Văn

944 bronze badges

1 Comment

Gil Over a year ago

is not what I need, I know it can be done that way but still do render a single div in my html...check my edit.

jennas · Accepted Answer · 2017-01-19 02:26:33Z

0

We created a framework to do this with great success.

Have a look at React Habitat.

With it you can just register components eg:

container.register('SomeReactComponent', SomeReactComponent);

Then they auto resolve in the dom via:

<div data-component="SomeReactComponent"></div>

answered Jan 19, 2017 at 2:26

jennas

2,4542 gold badges25 silver badges32 bronze badges

Collectives™ on Stack Overflow

React | Multiple render

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related