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 .

Answer 2

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;
}

Answer 3

In my case (react: 17.0.1) :

If you have constructor in you class, then you will have to initialize props like this

  constructor(props) {
    super(props);
  }

If there is nothing happening in you constructor, then simply removing the constructor worked for me and this.props worked as expected. The case when I got this error was having a constructor like this

  constructor() {
    super();
  }

Answer 4

I had to switch my

import { Output } from './Output';

to

import Output from './Output';

I'm very new to React and JS in general but that fixed it.

Answer 5

React.js noob btw;

first it was like this:

constructor(props) {
    super(props);
...

got the error ( 'props' is not defined )

then I just deleted (props) from super like this

constructor (props) {
    super();
...

and that solved it and everything loaded perfectly.

Answer 6

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);
}

Answer 7

I came across same problem, I solved by modifying my component, for component need to pass state using attribute binding, then access using props ,

component= { ()=> <AboutUs leaders={this.state.leaders}/> }

complete Route will be

<Route path="/aboutus" component= { ()=> <AboutUs leaders={this.state.leaders}/> } />

if problem with :id solved using, You can change as per your user/:id ,
this answers your question,

<Route path="/menu/:dishId" component= {DishWithId} />

use as,

const DishWithId = ({match}) => {
      return(
          <DishDetail dish={this.state.dishes.filter( (dish) => dish.id === parseInt(match.params.dishId,10))[0]} 
            comments={this.state.comments.filter( (comment) => comment.dishId === parseInt(match.params.dishId,10)) } 
          />
      );
    }