only allow children of a specific type in a react component

For React 0.14+ and using ES6 classes, the solution will look like:

class CardGroup extends Component {  render() {    return (      <div>{this.props.children}</div>    )  }}CardGroup.propTypes = {  children: function (props, propName, componentName) {    const prop = props[propName]    let error = null    React.Children.forEach(prop, function (child) {      if (child.type !== Card) {        error = new Error('`' + componentName + '` children should be of type `Card`.');      }    })    return error  }}

You can use the displayName for each child, accessed via type:

for (child in this.props.children){  if (this.props.children[child].type.displayName != 'Card'){    console.log("Warning CardGroup has children that aren't Card components");  }  }

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 (      <div>{this.props.children}</div>    );  }});