0
346
ViewsReact this.props is undefined
I've got a pretty standard setup, a router with pages:
import React from "react";
import ReactDOM from "react-dom";
import { IndexRoute, Router, Route, Link, hashHistory as history } from "react-router";
import Layout from "./pages/Layout";
...
import User from "./pages/User";
ReactDOM.render(
<Router history={history}>
<Route path="/" component={Layout}>
<IndexRoute component={...}/>
<Route path="project/create" component={...}/>
<Route path="project/:id" component={...}/>
<Route path="user/:id" component={User}/>
<Route path="*" component={...}/>
</Route>
</Router>,
document.getElementById("app-root"));
Everything is working perfectly except when I go to a page like site.tld/#/user/5. The User component has some trouble getting instantiated properly. All other pages are working, I also have another page that uses url parameters (project/:id) and it is working fine as well.
import React from "react";
...
export default class User extends React.Component {
constructor() {
super();
console.log(this);
...
}
render() {
return ...
}
This is what I get in the console.
I'm sure it's the dumbest thing ever again, but I can't pick it out...
3 answers
Answer question0
I think you're missing the following, try replacing your constructor:
constructor(props) {
super(props);
console.log(this.props)
}
Try it out, you should get output from this.props.
The constructor for a React component is called before it is mounted. When implementing the constructor for a React.Component subclass, you should call super(props) before any other statement. Otherwise, this.props will be undefined in the constructor, which can lead to bugs. Source: ReactJS.org Component Docs.
0
In my case, I forgot to bind the method that I was calling, that's why props was undefined.
constructor(props) {
super(props);
this.changeScreenToForm = this.changeScreenToForm.bind(this);
}
changeScreenToForm() {
this.props.app.changeScreen(Form);
}
0
In my case this -
constructor(props) {
super(props);
console.log(this.props);
}
still gave undefined.
I had to use this.props = props; explicitly and it worked.
constructor(props) {
super(props);
this.props = props;
}