only allow children of a specific type in a react component

Question

I have a Card component and a CardGroup component, and I\'d like to throw an error when CardGroup has children that aren\'t Card

Answer 1

You can use a custom propType function to validate children, since children are just props. I also wrote an article on this, if you want more details.

var CardGroup = React.createClass({
  propTypes: {
    children: function (props, propName, componentName) {
      var error;
      var prop = props[propName];

      React.Children.forEach(prop, function (child) {
        if (child.type.displayName !== 'Card') {
          error = new Error(
            '`' + componentName + '` only accepts children of type `Card`.'
          );
        }
      });

      return error;
    }
  },

  render: function () {
    return (
      
{this.props.children}
    );
  }
});