`React.PropTypes.instanceOf` always warns about invalid prop

[pletcher]

Checked with React v0.12.2 running in Chrome 40.0.2214.93, Safari 8.0.2, and Firefox 35.0.

I'm able to reproduce this issue with the following:

// icon.jsx

var Icon = React.createClass({
  propTypes: {
    icon: React.PropTypes.string.isRequired
  },

  render: function() {
    return <span className={this.props.icon} />;
  }
});

module.exports = Icon;

// wrapper.jsx

var Icon = require('./icon.jsx');

var Wrapper = React.createClass({
  propTypes: {
    icon: React.PropTypes.instanceOf(Icon).isRequired,
  },

  render: function() {
    return <button className="btn">{this.props.icon}</button>;
  }
});

module.exports = Wrapper

When I render an instance of Wrapper as

// var icon = <Icon icon="some-icon" />

 <Wrapper icon={icon} />

I get the error

Warning: Invalid prop `icon` supplied to `Wrapper`, expected instance of `<<anonymous>>`. Check the render method of `[the parent component]`.

(I was also able to reproduce the issue here: http://jsbin.com/necequvimi/2/ )

It seems like the instanceOf prop-type checker isn't working as expected, but maybe I've missed something.

[pletcher]

Hm, now that I've had a chance to look at what's expected, is it the case that PropTypes.instanceOf() expects a regular JavaScript "class" and not a React class? Could that be more explicit in the docs?

https://github.com/facebook/react/blob/master/src/classic/types/__tests__/ReactPropTypes-test.js#L277

[hzoo]

Yeah I think you are correct

at https://facebook.github.io/react/docs/reusable-components.html#prop-validation

// You can also declare that a prop is an instance of a class. This uses
// JS's instanceof operator.
optionalMessage: React.PropTypes.instanceOf(Message),

[pletcher]

Yeah, that makes sense -- I guess I just blindly assumed that React.createClass() returned a class that would work with instanceof. Hopefully the changes in http://facebook.github.io/react/blog/2015/01/27/react-v0.13.0-beta-1.html will help down the line :)

[hzoo]

https://facebook.github.io/react/docs/displaying-data.html#react-without-jsx

You can use React.createElement to render your classes (http://jsbin.com/suvoqesozo/1/edit)

[zpao]

Yea, instanceOf is really intended (and implemented as) x instanceof y.

[rhys-vdw]

Just ran into this problem. Is there a way to constrain a prop (ie. children) to be of a certain Component type?

[zpao]

I think something like elementOfMyComponent: PropTypes.shape({type: PropTypes.oneOf([MyComponent]) would do it. There's some discussion of maybe having PropTypes.elementOfType in #4716 but not sure if we'll do it (there's a lot of room for confusion and it really doesn't pair well with specialized components.

[chemoish]

<ButtonGroup>
  <Button />
  <Button />
</ButtonGroup>

Is this possible?

ButtonGroup.propTypes = {
  children: React.PropTypes.arrayOf(React.PropTypes.shape({
    type: React.PropTypes.oneOf([Button])
  }))
};

Seems weird that this is the only way i found it to validate (instanceOf did not work).

[evpozdniakov]

I still have a minor problem, which appears when there is only children. If yes, PropTypes.arrayOf stops working.

[chemoish]

Verbose, but it works.

ButtonGroup.propTypes = {
  children(props, propName, componentName) {
    const allowedTypes = [
      Button,
    ];

    const isValid = React.Children.toArray(props[propName]).every((child) => (
      allowedTypes.includes(child.type)
    ));

    if (isValid) {
      return null;
    }

    return new Error(`Invalid prop ${propName} supplied to ${componentName}.`);
  },
};

---

@evpozdniakov I haven't tried, but you might be able to also wrap it in a oneOfType?

ButtonGroup.propTypes = {
  children: React.PropTypes.oneOfType([
    React.PropTypes.shape({
      type: React.PropTypes.oneOf([Button])
    }),

    React.PropTypes.arrayOf(React.PropTypes.shape({
      type: React.PropTypes.oneOf([Button])
    }))
  ])
};