React component not being rendered entirely into PugJS view upon calling Express res.render

I'm hoping for some pointers to the following challenge:

• I have created a PugJS view --> this view is rendered inside an EpxressJS route --> in the call to the ExpressJS function res.render the React component is included as data inside the ExpressJS .render() function call.....

! The thing is that the React component is not being rendered correctly and mounted as a HTML element. I only get a single 'div' and the first 'a' tag. ! I'm using webpack for bundling up...resulting in a bundle.js file which is included in a 'script' tag in my PugJS view. ! Notice the use of 'simple-react-modal'

Here is the React component:

let isNode = typeof module !== 'undefined' && module.exports;
import * as React from 'react';
import * as ReactDOM from 'react-dom';

import Modal, {closeStyle} from 'simple-react-modal';

let appClass = class App extends React.Component {

  constructor(props) {
    super(props);
    this.state = {};

    this.show = this.show.bind(this);
  }

  show(){
    this.setState({show: true});
  }

  close(){
    this.setState({show: false});
  }

  render() {
    return (
      <div>
        <a onClick={this.show}>Open Modal</a>
        <Modal
          className="test-class" //this will completely overwrite the **strong text**default css completely
          style={{background: 'red'}} //overwrites the default background
          containerStyle={{background: 'blue'}} //changes styling on the inner content area
          containerClassName="test"
          closeOnOuterClick={true}
          show={this.state.show}
          onClose={this.close.bind(this)}>

          <a style={closeStyle} onClick={this.close.bind(this)}>X</a>
          <div>hey</div>
        </Modal>
      </div>
    );
  }
}

if (isNode) {
  exports.App = appClass;
} else {
  console.log("hi from here");
  ReactDOM.render(new appClass({}), document.getElementById('react-root'));
}

--> there is nothing in the onClick placeholder on the first 'a' tag in the resulting HTML code. onClick is not there at all. No event listeners as well.

This is how the rendering part of the ExpressJS route looks like:

// Prep react modal....
let modalApp = React.createFactory(App.App);
let react = renderToString(modalApp({}));

expressRes.render('entry', {
    title: 'Somthing',
    message: 'Somthing',
    myName: name,
    email: expressReq.email,
    react: react

The result looks like this:

My webpack configfile:

module.exports = {
entry: "./app/components/modal.tsx",
output: {
    filename: "./app/components/bundle.js",
},

// Enable sourcemaps for debugging webpack's output.
devtool: "source-map",

resolve: {
    extensions: ["", ".webpack.js", ".web.js", ".ts", ".tsx", ".js"]
},

module: {
    loaders: [
        // All files with a '.ts' or '.tsx' extension will be handled by 'ts-loader'.
        { test: /\.tsx?$/, loader: "ts-loader" }
        //{ test: /\.jsx?$/, loader: "jsx" }
    ],

    preLoaders: [
        // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
        { test: /\.js$/, loader: "source-map-loader" }
    ]
}

// When importing a module whose path matches one of the following, just
// assume a corresponding global variable exists and use that instead.
// This is important because it allows us to avoid bundling all of our
// dependencies, which allows browsers to cache those libraries between builds.
/*externals: {
    "react": "React",
    "react-dom": "ReactDOM"
},*/

};

---

---- TECH. INFO ----

• using TypeScript under development
• using JSX
• The server is running on NodeJS
• webpack is used to bundle it all.
• So server side rendering is used.

===============

What am I missing? Why isn't the entire React 'Modal' object included and mounted onto the resulting HTML?

Looking forward to hear from you.

Thank you so very much :-)

I made this little component you're talking about. The problem here is that if you want it to show, set show: true in your App component. Or, you can include the js on the client and when you click it will trigger it to open. react-simple-model renders nothing unless it is open.