How to set defaultProp value based on value of other prop?

Question

I have a component where the default value of one prop depends on the value of another prop (default or user provided). We can't do the following because we don't have access to this:

static defaultProps = {
    delay: this.props.trigger === 'hover' ? 100 : 0,
    trigger: 'hover'
};

How can I best do this?

Answer 1

Using a function component you can do it like this:

function MyComponent({
    trigger,
    delay: trigger === 'hover' ? 100 : 0,
}) {
  return <div>...</div>
}

MyComponent.propTypes = {
  trigger: PropTypes.string.isRequired,
  delay: PropTypes.number.isRequired,
};