CODEWITHSUNDEEP
reactjs
jay.m
jay.m

Reputation: 1628

How to set defaultProps for function?

Is it possible to set defaultProps for functions? Code below doesn't work. It doesn't like 'this'. I tried 1_ bind defaultProps to 'this', or 2_ bind handleClose to 'this', neither works. I use ES6 class.

SaveDialog.propTypes = {
  note: React.PropTypes.string,
  onCancel: React.PropTypes.func,
  onSave: React.PropTypes.func,
  onEditChange: React.PropTypes.func
};

SaveDialog.defaultProps = {
  note: '',
  onCancel: {this.handleClose},
  onSave: {this.handleClose},
  onEditChange: {this.handleChange}
};

Upvotes: 14

Views: 33816

Answers (3)

Darryl J. Zeigler
Darryl J. Zeigler

Reputation: 188

propTypes is a validator. We use propTypes to document the intended property types passed to components. React checks the props passed to components against those definitions, and will result in a warning/error when they don’t match.

We can define default values to props using the defaultProps property. defaultProps is used to ensure that props will have a value if it was not specified by the parent component. The propTypes type-checking happens after defaultProps are resolved, so type-checking will also apply to the defaultProps.

Here we have

SaveDialog.propTypes {
  note: PropTypes.string,
  onCancel: PropTypes.func,
  onSave: PropTypes.func,
  onEditChange: PropTypes.func,
};

React is making sure that the note prop is a string, and is making sure the onSave, onCancel, and onEditChange props are functions. If not, it will result in a warning/error.

Here we have

SaveDialog.defaultProps {
  note: '',
  onCancel: {this.handleClose},
  onSave: {this.handleClose},
  onEditChange: {this.handleChange},
};

In SaveDialog.propTypes, note has been declared as a string. Let’s assume that a prop has not been specified by the parent container. Since note has no value, we will use the default value provided in defaultProps. The default value of note is an empty string. When type-checking occurs, we see that the prop is intended to be a string and is, in fact, an empty string. No problems here, let’s move on.

Next up, onCancel in SaveDialog.PropTypes {...}; onCancel has been declared as a func (function). Assuming that a prop has not been specified by the parent container, we’ll use the default value of onCancel in defaultProps. The default value is this.handleClose.

Let’s talk about what’s going on here. To put it simply, this is referring to the object that invoked the function.

In that case, defaultProps does not have access to the onCancel function, and because onCancel wasn’t defined within defaultProps, it returns undefined, or an error/warning.

If that's the case, all we have to do is define what we want onCancel to be within defaultProps.

So we can declare the functions within defaultProps or we can have the default value be an empty function making it clear that onCancel, onSave or the onEditChange functions are empty functions that return undefined.

SaveDialog.defaultProps {
  note: '',
  onCancel: () => {},
  onSave: () => {},
  onEditChange: () => {},
};

or 

SaveDialog.defaultProps {
  note: '',
  onCancel: () => {
        // handleClose function here
  },
  onSave: () => {
    // handleClose function here
  },
  onEditChange: () => {
    // handleChange function here
  },
};

Upvotes: 21

PetersenDidIt
PetersenDidIt

Reputation: 25620

You can use the getDefaultProps method.

getDefaultProps() {
  return {
    note: '',
    onCancel: this.handleClose.this(bind),
    onSave: this.handleClose.this(bind),
    onEditChange: this.handleChange.this(bind)
  };
}

Upvotes: 4

J. Mark Stevens
J. Mark Stevens

Reputation: 4945

Set the default props for the component and attach the function to the component in the constructor.

constructor() {
  super();
  this.extFunction = extFunction.bind(this);
 }

Upvotes: 0

Related Questions