Meteor+React element duplication

Question

I'm trying to create the structure of a basic Meteor app with React: This is the main.html

<head>
    <title>test</title>
</head>
<body>
    <div id="render-target"></div>
</body>

this is the startup function

Meteor.startup(function () {
    ReactDOM.render(<AppLayout />, document.getElementById("render-target"));
});

and this is the app layout

AppLayout = React.createClass({
    render() {
        return (
            <div className="wrapper">
                {this.props.nav}
                {this.props.content}
                {this.props.footer}
            </div>
        )
    }
});

from what I understand the

ReactDOM.render(<AppLayout />, document.getElementById("render-target"));

should replace the div "render-target" with the AppLayout element (the "wrapper" div), but when i run the app, inside the body i see two div: the "render-target" and the "react-root". As you can see here
why is the "render-target" div still there and the "wrapper" is duplicated?

EDIT:
the router part is

FlowRouter.route("/", {
    name: "HomePageRoute",

    action:function() {
        ReactLayout.render(AppLayout, {
            nav: <NavBar />,
            content: <HomePageContainer />,
            footer: <Footer/>
        });
    }
});

thatgibbyguy thatgibbyguy · Accepted Answer · 2016-03-05T15:19:54

ReactDOM.render(<AppLayout />, document.getElementById("render-target"));

Will not replace the render-target id, that will always exist. As for the duplicate, I've never seen that "accidentally" happen. If you could show your whole code I'm almost certain we'll find that you have something else rendering to that element.

What packages are you using? What version of meteor? What router? Those are all important to know here.

In the end, I'd recommend using react-template-helpers for this as it's a lot more clear what's going on when using meteor + react. An example of it's usage is available from this meteor starter boilerplate.

Meteor+React element duplication

1 Answers