Bolboa Bolboa - 3 months ago 9
Javascript Question

conditional statement not rendering properly

I am rendering the following using react...

class App extends React.Component {
constructor(props) {
super(props);
this.state = {
register: false
}
}
handleClick(event)
{
this.setState({register: true});
}

render(){

//console.log(this.props.exists);

if (this.state.register || this.props.exists == true) {
return (
<Register />
);
}
else {
return (
<Index event={this.handleClick.bind(this)} />
);
}
}
}

module.exports = App;


So I am using node.js to render the page. When I render as so...

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


<Index />
gets rendered, as expected and
console.log(this.props.exists)
prints out
false
, also as expected.

However, the problem occurs when I render the page as so...

var reactHtml = reactDom.renderToString(App({exists: true}));
res.render('../../tutorHub/views/index.jade', {reactOutput: reactHtml});


console.log(this.props.exists)
prints
true
, which is correct. However, the
<Index />
page is getting rendered as opposed to the
<Register />
page.

I suspect it has something to do with

( this.state.register || this.props.exists == true )


For some reason
this.state.register
is read properly, but
this.props.exists
is never reached.

Can someone show me why this is so?

Answer

I think you should use reactDom.renderToString(<App exists={true} />) not reactDom.renderToString(App({exists: true}));

Comments