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

For me the simplest way to achieve this was following code.

Example 1:

import React, {Children} from 'react';

function myComponent({children}) {

  return (
    
{children && Children.map(children, child => {
      if (child.type === 'div') return child
    })}
  )
}

export default myComponent;

Example 2 - With Component

import React, {Children} from 'react';

function myComponent({children}) {

  return (
    
{children && Children.map(children, child => {
      if (child.type.displayName === 'Card') return child
    })}
  )
}

export default myComponent;