Expand Minimize

React event handlers are defined using camelCased properties

React event handlers are defined using camelCased properties

CheckId SPF010601
TypeName WebPartUseCorrectCasingForReactEventHandlers
Severity Error
Type Src

Handling events in React is similar to handling events in HTML but there are a few key differences:

  • React events are named using camelCase while HTML events are often referred to using lowercase
  • In JSX you pass a function as the event handler rather than then function name (string)
  • You cannot return false to prevent default behavior in react. Instead you should call e.preventDefault();
Bad practice
<button onclick="activateLasers()"> Activate Lasers </button>
Good practice
<button onClick={activateLasers}> Activate Lasers </button>

Disclaimer: The views and opinions expressed in this documentation and in SPCAF do not necessarily reflect the opinions and recommendations of Microsoft or any member of Microsoft. SPCAF and RENCORE are registered trademarks of Rencore. All other trademarks, service marks, collective marks, copyrights, registered names, and marks used or cited by this documentation are the property of their respective owners.