Is it safe to pass undefined in React's onClick handler?

I just tried and everything still works, but I can't find any line about that in docs.

Example:

function MonthBar(props) {
  /* is it okay when props.onClick === undefined ? */
  return <span onClick={props.onClick}>{props.monthName}</span>;
}

MonthBar.propType = {
  onClick:  React.PropTypes.func, // optional                   
  monthName: React.PropTypes.string.isRequired
};

Is it safe to pass undefined in React's onClick handler?

I just tried and everything still works, but I can't find any line about that in docs.

Example:

function MonthBar(props) {
  /* is it okay when props.onClick === undefined ? */
  return <span onClick={props.onClick}>{props.monthName}</span>;
}

MonthBar.propType = {
  onClick:  React.PropTypes.func, // optional                   
  monthName: React.PropTypes.string.isRequired
};

• javascript
• reactjs

Share Improve this question Follow asked Aug 28, 2016 at 17:44 Alex PovarAlex Povar 4,96033 gold badges3232 silver badges4444 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

It's perfectly valid to pass in undefined as the onClick handler. They already have to handle that case implicitly since it's an optional parameter.

passing undefined can be handled by checking it on your onClick,

function MonthBar(props) {
/* is it okay when props.onClick === undefined ? */
  return (
   <span onClick={props.onClick !== undefined? props.onClick : ''}>
    {props.monthName}
   </span>);
}

MonthBar.propType = {
  onClick:  React.PropTypes.func, // optional                   
  monthName: React.PropTypes.string.isRequired
}; 

the concern should be more about you want to pass the undefined to the onClick or not