I am using node js to render my react ponent...

var express = require('express');
var router = express.Router();

var React = require('react');
var reactDom = require('react-dom/server');
var App = React.createFactory(require('../ponents/index'));

router.get('/', function(req,res) {
    var reactHtml = reactDom.renderToString(App({exists: false}));
    res.render('../../tutorHub/views/index.jade', {reactOutput: reactHtml});
});
module.exports = router;

I am trying to pass a prop, exists: false, to the ponent.

But in my actual ponent when I try to console.log...

render(){

    console.log(this.props.exists);
        return (
            <Register />
        );
}

I get undefined rather than true.

How can I fix this? Is this because the browser is re-rendering the page?

I am using node js to render my react ponent...

var express = require('express');
var router = express.Router();

var React = require('react');
var reactDom = require('react-dom/server');
var App = React.createFactory(require('../ponents/index'));

router.get('/', function(req,res) {
    var reactHtml = reactDom.renderToString(App({exists: false}));
    res.render('../../tutorHub/views/index.jade', {reactOutput: reactHtml});
});
module.exports = router;

I am trying to pass a prop, exists: false, to the ponent.

But in my actual ponent when I try to console.log...

render(){

    console.log(this.props.exists);
        return (
            <Register />
        );
}

I get undefined rather than true.

How can I fix this? Is this because the browser is re-rendering the page?

• javascript
• node.js
• reactjs

• Inject props into global space inside html using template literal ` window.__initProps__=JSON.stringyfy(${props}) ` – Kbalsamy Commented Sep 23, 2022 at 10:29

2 Answers 2

The reason is on your client-side, React will render your App ponent one more time. This time, React will re-render which ponents are different from server-rendered ponents. It will refresh your props.exists to undefined because you don't pass anything to App ponent in your client-side code. There are some techniques to solve it. One way is that in your client-side code, you request exists from the server and pass it to your App ponent before rendering your application.

I created a very simple app based on your code and am able to see the exists prop set correctly in the render method. Given that this self-contained version works, I wonder if the issue lies somehow within the code of ../ponents/index.

'use strict';

var express = require('express');
var router = express.Router();

var React = require('react');
var reactDom = require('react-dom/server');
var App = React.createFactory(class extends React.Component {
  render () {
    console.log(this.props);
    return React.createElement('div');
  }
});

router.get('/', function(req,res) {
    var reactHtml = reactDom.renderToString(App({exists: false}));
    res.send(reactHtml);
});

var app = express();
app.use('/', router);
app.listen(3000);