Specifying Complex Proptypes For Children

I'm writing a small Toolbar component in React. Here's how it should be used: or

Solution 1:

Did you tried to do:

customProp: function (props, propName, componentName) {
    props.children.forEach(child => {
        if (!child instanceofToolbarButtonSearch && !child instanceofToolbarButtonFold) {
            returnnewError(
                'Invalid children supplied to' +
                ' `' + componentName + '`. Validation failed.'
            )
        }
    })
}

Solution 2:

Instead of passing components (since they have to be imported into Toolbar, anyway), you could just pass props defining if the specific component should be displayed.

constToolbar = ({showButtonSearch = false, showButtonFold = false, buttonSearchProps = {}, buttonFoldProps = {}}) => {

  return (

    <divclassName='Toolbar'>

      {showButtonSearch ? <ButtonSearch {...buttonSearchProps} /> : null}

      {showButtonFold ? <ButtonFold {...buttonFoldProps} /> : null}

    </div>

  )

}

This method would also allow you to pass props for the children as well as any further functionality you need before displaying the children (such as ordering the children a specific way).