React Warning - Invalid access to component property

react-warning-descriptors.md

You're probably getting this warning because you're accessing methods on a component before it gets mounted. This will be soon be an unsupported use case.

The component that gets created by invoking the convenience constructor MyComponent(props, children) or using the JSX syntax <MyComponent /> is not guaranteed to be the instance that actually gets mounted. It's a description of what the actual mounted instance should look like.

Anti-pattern:

The component also doesn't have access to state or other important information such as the final props. As a consequence you shouldn't be calling custom methods on this object.

var MyComponent = React.createClass({
  customMethod: function() {
   return this.props.foo === 'bar';
  },
  render: function() {
  }
});

var component = <MyComponent foo="bar" />;
component.customMethod(); // invalid use!

Correct Usage:

The upgrade path is to convert these methods to static methods and invoke them with the necessary parameters.

var MyComponent = React.createClass({
  statics: {
    customMethod: function(foo) {
     return foo === 'bar';
    }
  },
  render: function() {
  }
});

// If you know the type, you can just invoke it directly

MyComponent.customMethod('bar'); // valid

// If you don't know the type of the component, you can use the .type property.
// This is useful if the component is passed into you.

var component = <MyComponent foo="bar" />;
...
component.type.customMethod(component.props.foo); // valid

Access to the Mounted Instance:

If you need access to the real instance that is mounted you can use either the return value of React.renderComponent(...) or refs in callbacks.

var MyComponent = React.createClass({
  customMethod: function() {
   return this.props.foo === 'bar';
  },
  render: function() {
  }
});

var realInstance = React.renderComponent(<MyComponent foo="bar" />, root);
realInstance.customMethod(); // this is valid

var Container = React.createClass({
  handleClick: function() {
    this.refs.component.customMethod(); // this is also valid
  },
  render: function() {
    return (
      <div onClick={this.handleClick}>
        <MyComponent foo="bar" ref="component" />
      </div>
    );
  }
});

I got this error when I was initializing a router in the componentDidMount life-cycle method. The router initialized and called setProps on the component.

Pro-tip: Your component isn't actually ready to go in the componentDidMount callback. Wrap all the state-affecting stuff you need to do in a setTimeout(fn, 0).

I'm getting this warning by calling a method on a custom mixin from within my component's render() method. Shouldn't mixin methods be accessible by the time I'm rendering? If not, then what is the point of a mixin?

In case this helps anyone else, it turned out the issue was that I was requiring 2 versions of React. This inadvertently happened while I was building an npm module for a React component, and I had React as a devDependency in my package.json. I used npm link to test the module locally, not realizing that the node_modules folder in there included a separate react folder that was being required as a result of it being a devDependency. Just had to trash the node_modules folder that, and it worked.