React: this.props is not available in Component constuctor

[ivstas]

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.

[andreypopp]

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.

[waleedarshad-vf]

props is undefined in constructor. any reason?

[gaearon]

@waleedarshad-vf Please see the comment above: https://github.com/facebook/react/issues/3599#issuecomment-90079947.

[waleedarshad-vf]

@gaearon i mean to say prop is undefined here

export default class MessageBox extends React.Component {
constructor(props) {
console.log(props) => undefined // this is coming in particular class otherwise it give atleast {} elsewhere
super(props);
console.log(this.props);
}
...
}

[aweary]

@waleedarshad-vf can you share a code sample reproducing your issue? You can use https://jsfiddle.net/reactjs/69z2wepo/ as a base. props should never be undefined as far as I know, so there's likely something else going on here.

[waleedarshad-vf]

@Aweary i am unable to reproduced. but i got undefined when i put debugger over there. not sure where it has gone :)

[sankety]

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 👍

[nemo]

I'm facing this in React Native (though doubt it has much to do with RN).

Here's an example: https://sketch.expo.io/rkfJU10il

Any thoughts how I can fix it?

[gaearon]

@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: {},
  }

[nemo]

@gaearon Good catch – but that didn't change anything. https://sketch.expo.io/rkfJU10il

[gaearon]

How to reproduce the issue? I opened the app but you didn't provide a description of how to reproduce the problem.

[nemo]

@gaearon – look at the Logs section (click on "No Errors" in the bottom bar) and see that the props is undefined. Reproduction is done on launch of the app (You can launch a simulator in your browser by turning on "Preview" in the bottom bar.

[gaearon]

Thanks! It took me a while to find the Logs bar 😄
I can repro this now.

Does this happen without Expo?

[nemo]

@gaearon going to try it without Expo in a bit – I'll report back.

[nemo]

@gaearon – looks like this was Expo specific! Works without issues in our actual app.

[gaearon]

@nemo Thanks for confirming. Mind filing an issue with them?

[nemo]

@gaearon Already did :)

[seanyang414]

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

[MrCoder]

Not sure if this is best practice, but in Pro React the author always call super(...arguments). As the base class's constructor may have more arguments, this may be a good idea. Here is the implementation of Component:
````
/**

• Base class helpers for the updating state of a component.
  */
  function Component(props, context, updater) {
  this.props = props;
  this.context = context;
  this.refs = emptyObject;
  // We initialize the default updater but the real one gets injected by the
  // renderer.
  this.updater = updater || ReactNoopUpdateQueue;
  }
  ````