I have a server.js file that should get some data from the server and save it in an object called customP. To make things easier for now I'm playing around trying to pass a constant string along with the RouterContext renderProps:
server.js
markup = renderToString(<RouterContext {...renderProps} createElement={(Component, props) => {return <Component customP={"boaz"} {...props} />;}} />);
return res.render('index', {markup});
index.ejs
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vetevo dashboard</title>
<link rel="stylesheet" href="/css/style.css">
</head>
<body>
<div id="main"><%- markup -%></div>
<script src="/js/bundle.js"></script>
</body>
</html>
routes.js
const routes = (
<Route path="/dashboard" component={Layout}>
<IndexRoute foo="bar" component={DashboardPage}/>
<Route path="*" component={NotFoundPage}/>
</Route>
);
And finally the most important part: DashboardPage Component
constructor(props) {
super(props);
console.log(props.customP);
}
render() {
//console.log(this.props);
return (
<div className="dashboard">
<h2>This is the component: {this.props.customP}</h2>
<h1>SA</h1>
</div>
);
}
The weird thing is that the customP prop is shown for a millisecond and then disappears. Not only that - I get in the console.log in the constructor function the right value. I think that leads to the conclusion that there is another render happening or the render is crushing. I can't find the reason why, but componentDidMount() is also not responding.
Update
console.log works for componentDidMount() but the props and state is undefined there, while in the console.log in constructor they are appearing exactly as they should...
Any help would be appreciated.