Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
React Warning - Invalid access to component property

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

This comment has been minimized.

Copy link

@remydagostino remydagostino commented Mar 30, 2014

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

@mhuggins

This comment has been minimized.

Copy link

@mhuggins mhuggins commented Jul 31, 2014

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?

@mhuggins

This comment has been minimized.

Copy link

@mhuggins mhuggins commented Aug 15, 2014

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.