Providing default value for function prop in React

Question

What is the best way to handle optional React.PropType.func properties?

Should I provide default noop for it (if so what's the best way) or should I just check if the prop is defined?

propTypes: {
    onClick: React.PropTypes.func
},

someMethod: function() {
    if (this.props.onClick) {
       this.props.onClick();
    }
}

Bimal Grg · Accepted Answer · 2018-05-10 11:17:39Z

11

i am using anonymous empty arrow function... correct me if this is stupid :)

component.defaultProps = {
  foo: () => {},
};

answered May 10, 2018 at 11:17

Bimal Grg

8,1762 gold badges27 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rick Jolly · Accepted Answer · 2015-09-25 16:46:32Z

4

React has getDefaultProps. Then you can call onClick without errors.

getDefaultProps: function() {
    return {
        onClick: function() {}
    };
}

answered Sep 25, 2015 at 16:41

Rick Jolly

3,0192 gold badges27 silver badges32 bronze badges

ES6 class syntax for the same: "static defaultProps = { onClick: () => {} };"

Wes Foster · Accepted Answer · 2015-09-26 17:52:01Z

0

You could do with typeof:

if (typeof this.props.onClick === 'function'){
    //...
}

Wes Foster

8,9005 gold badges45 silver badges64 bronze badges

answered Sep 25, 2015 at 14:58

syarul

2,2053 gold badges23 silver badges22 bronze badges