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 components. Is this possible, or am I trying to solve the wrong problem?

Answer 1

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");   }   } 

Answer 2

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   } }