React component is mounting but empty

Hey, I’m just starting with React and Meteor, been using Blaze before.
The decision to use React was made since I want to use the Apollo Stack with GraphQL, and it just seemed easier to me to do this in React (besides other benefits we don’t need to discuss here).

I set a fresh project, added react and react-dom npm components, created a routes file and a simple component.
I can see the component mount when inspecting the DOM, but it’s empty. No content is showing. Did I miss something major on how to get started with React or what’s the issue here?

MainLayout.jsx:

import React from 'react';

export class MainLayout extends React.Component {
  render() {
    return (
    	<div>
    		<p>Test</p>
    	</div>
    );
  }
}

routes.jsx:

import React from 'react';
import { mount } from 'react-mounter';
import { MainLayout } from './views/layout/MainLayout.jsx'

FlowRouter.route('/',{
	action() {
		mount('MainLayout',{});
	}
})

As I said, when inspecting the DOM I can see a <div id="react-root"></div> and inside is a <mainlayout data-reactroot></mainlayout>
the “Test” however is not showing up.

Thanks for your help in advance and sorry if it’s a stupid newbie mistake :smiley:

I think the issue is that you haven’t exported MainLayout class properly. According to es6 module syntax you should export it like export default class ... extends React.Component, not just export class ... extends React.Component.

Thanks, that was something I was trying out as well. but as far as I understood it, if you export as default, you don’t need the curly braces when importing. if you don’t export as default, you will need to import using { Module } syntax.

Anyway, changing this doesn’t do anything :wink: And if the export is wrong shouldn’t I get something like “MainLayout is undefined” in the console? My console is empty. No errors or warnings.

Okay, I got you. So let’s start from the basics, did you define a tag where your component will be rendered in the initial html file?

No I didn’t define a tag in the main html, but I am using FlowRouter with react-mounter https://github.com/kadirahq/react-mounter which should automatically create a <div id="react-root"></div> (which it does). Is that correct, or do I have to define it myself?

Yes, it creates this div but you should obviously create a start point in your html file because basically you should point your component where to render.
To get this working you need to create a start point in html file (for example create a div with id init and then make changes to your client.js file and eventually have something like this:

`import React from 'react';
import { Meteor } from 'meteor/meteor';
import { render } from 'react-dom';
 
import {MainLayout} from './views/layout/MainLayout.jsx';
 
Meteor.startup(() => {
  render(<MainLayout />, document.getElementById('init'));
});`

That does work, so at least now I have a “Test” on the page.
Right now I’m mounting the component on Meteor startup right? How I do mount the component from the router, without specifying an insertion point all the time? I understood that with react-mounter I can use import and call the mount() method and the npm module will create an insertion point for me.