react: this.props is not available in Component constuctor

versions: node 0.12, react 13, babel - tested with both 4.7.4 and 5.0.8 I’m playing with new es6 syntax and figured out weird behaviour.

export default class MessageBox extends React.Component {
    constructor() {
         super();
         console.log(this.props);
    }
    ...
}

This code snippet will print undefined. In fact, another weird stuff is that console.log(this) will print an object with props property.

About this issue

Original URL
State: closed
Created 9 years ago
Reactions: 7
Comments: 19 (2 by maintainers)

Most upvoted comments

Try passing props to super call:

export default class MessageBox extends React.Component {
    constructor(props) {
         super(props);
         console.log(this.props);
    }
    ...
}

As for console.log(this) Chrome will print a “live” object to console and React assigns props on the constructed instance right after the construction in addition to passing them to constructor.

+35

andreypopp on Apr 6, 2015

Just use props instead of this.props. Since this doesn’t exist yet.

seanyang414 on Jan 17, 2018

Why this issue is closed? I am still facing the same issue. I get response for console.log(this) but console.log(this.props) is undefined 😦 Please give any work around for this it will be very helpful 👍

sankety on Feb 25, 2017

@sankety

You are probably missing super(props) call in your constructor. Add it, and everything will be fine.

constructor(props) {
  super(props);
  // Now you can read this.props
}

@nemo

One mistake I see in your example is that you’re not declaring propTypes and defaultProps as static. This is wrong:

  defaultProps = {
    onPress: null,
    children: null,
    buttonStyle: {},
  }

This is right:

  static defaultProps = {
    onPress: null,
    children: null,
    buttonStyle: {},
  }

gaearon on Mar 20, 2017