React props - set isRequired on a prop if another prop is null / empty

Question

I have a component <Button>.
If the component doesn't has this.props.children, I want to set the prop ariaLabel as isRequired, otherwise in can be optional. How do I do that?

ariaLabel prop not required:

<Button>Add to bag</Button> 

---

ariaLabel prop has to be required:

<Button ariaLabel="Add to bag" icon={ favorite } /> 

---

if this.props.children and this.props.ariaLabel are empty, it throws an error saying that this.props.ariaLabel is isRequired

<Button icon={ favorite } /> 

---

propTypes:

Button.propTypes = {     /** icon inside Button. */     icon: React.PropTypes.object,     /** Content inside button */     children: React.PropTypes.node,     /** Aria-label to screen readers */     ariaLabel: React.PropTypes.string, /*isRequired if children is empty */ }; 

Thanks

Answer 1

You don't need another library, 'prop-types' provides this out of the box. See https://facebook.github.io/react/docs/typechecking-with-proptypes.html

Example:

import PropTypes from 'prop-types';  //.......      ExampleComponent.propTypes = {     showDelete: PropTypes.bool,     handleDelete: function(props, propName, componentName) {         if ((props['showDelete'] == true && (props[propName] == undefined || typeof(props[propName]) != 'function'))) {             return new Error('Please provide a handleDelete function!');         }     },  } 

Answer 2

This may be exactly what you need: https://github.com/thejameskyle/react-required-if

In your case, your propTypes would be:

import requiredIf from 'react-required-if';  Button.propTypes = {     /** icon inside Button. */     icon: React.PropTypes.object,     /** Content inside button */     children: React.PropTypes.node,     /** Aria-label to screen readers */     ariaLabel: requiredIf(React.PropTypes.string, props => !props.children), /*isRequired if children is empty */ };