Meteorjs + React, how to render several elements in Meteor.startup

help
1

I am trying to declare two different React elements that I would like to render. The both elements are separated elements such as displayed elements (App.jsx) and the customized account system (Login.jsx). But in my test I have the same code in the both jsx file to ensure that the issue is not related to a specific part of them.

I have also created an /imports/startup/client/index.js file (called in the /client/main.js file):

import React from 'react';
import { Meteor } from 'meteor/meteor';
import { render } from 'react-dom';

import './accounts-config.js';
import App from '/imports/ui/App.jsx';
import Login from '/imports/ui/Login.jsx';

Meteor.startup(() => {
    render(<App />, document.getElementById('app'));
    render(<Login />, document.getElementById('login'));
})

and the /client/main.html contains the related div tags:

...
<div id="app"></div>
<div id="login"></div>
...

The issue is that the second render is never displayed (here, the div login) and I observe that only the first render is interpreted.

All the examples that I’ve found only deals with a single react element. So I wonder how to use several separated react elements like it is in my html file ?

I am newbie in the meteorjs and react world , so maybe I didn’t get the right philosophy…

2

Are you using a router? Here is a link to react router with nested routes: https://reacttraining.com/react-router/core/guides/philosophy/nested-routes

The /client/main.html div should just be one, that render just attaches your whole app to by id.

Maybe look at these react router 3 and react router 4 tutorials.
https://themeteorchef.com/tutorials/react-router-basics
https://themeteorchef.com/tutorials/getting-started-with-react-router-v4

3

Funny you should ask, I just posted a Gist which shows how I render my application.

In my app, I have my login handled in the component (it is external, you can see it being imported).
From the Gist you can see how the React router gets loaded and how components are mounted.

1 Like
4

Thanks for your reply. I don’t have implemented any router yet. So I will have a look to your related links.

5

Thanks for your Gist, It helps me to compare and find the right way to integrate several components. I have also read the reactjs doc:
https://reactjs.org/docs/components-and-props.html
So only one render can be declared in the Meteor.startup(() (in my index.js).

Meteor.startup(() => {
    render(<App />, document.getElementById('app'));
})

The trick is that this Super component has to be used to call all the other components. In my example by calling the Login component:

  render() {
      return (
          <div className="container">
            <Login />
          </div>
      )
  }

Thanks for your help !

6

Yes correct, or you can just wrap it in another container, even just a <div>.