React this.props is undefined

Question

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...

Answer 1

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.