Additional component in <MuiThemeProvider /> results in blank page w/ no error messages

Question

I have recently installed Material UI into my Meteor application using npm install --save material ui

I have gotten the <Header /> component showing up in my app.js file, but whenever I add other components, localhost:3000 simply displays a blank page. Please see my code below:

header.js

import React, { Component } from 'react';
import AppBar from 'material-ui/AppBar';

class Header extends Component {
  render() {
    return(
      <AppBar
        title="Header"
        titleStyle={{textAlign: "center"}}
        showMenuIconButton={false}
      /> 
   );
  }
}

export default Header;

app.js

import React from 'react';
import ReactDOM from 'react-dom';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';

import Header from './components/header'; 
import NewPost from './components/new_post';

const App = () => {
  return (
    <MuiThemeProvider>
      <Header />
    </MuiThemeProvider>
  );  
};

Meteor.startup(() => {
  ReactDOM.render(<App />, document.querySelector('.render-target'));
});

THE ABOVE CODE WORKS WELL (see screenshot below)

However, if I add another component I get a blank screen

header.js is the same

new_post.js

import React, { Component } from 'react';
import TextField from 'material-ui/TextField';

class NewPost extends Component {
  render() {
    return (
      <TextField
      hintText="Full width"
      fullWidth={true}
      />
    );
  }
}

export default NewPost;

app.js

import React from 'react';
import ReactDOM from 'react-dom';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';

import Header from './components/header'; 
import NewPost from './components/new_post';

const App = () => {
  return (
    <MuiThemeProvider>
      <Header />
      <NewPost />
    </MuiThemeProvider>
  );  
};

Meteor.startup(() => {
  ReactDOM.render(<App />, document.querySelector('.render-target'));
});

The result is simply a blank screen

Why does adding one more component (<NewPost />)inside of <MuiThemeProvider> result in a blank screen? I referred to the material-ui documentation and their sample projects but their application structure is not similar to mine. Any advice? Please let me know if you need more info to make this question clearer.

Answer 1

Wow very strange but I managed to get it working by simply adding a <div>

app.js

const App = () => {
  return (
    <MuiThemeProvider muiTheme={getMuiTheme()}>
      <div>
        <Header />
        <NewPost />
      </div>
    </MuiThemeProvider>
  );  
}
Meteor.startup(() => {
  ReactDOM.render(<App />, document.querySelector('.render-target'));
});

I would really appreciate if anyone could explain why adding a div makes this all work. Thank you!