React events – How to handle


React events use camelCase for syntax.

Below is an html example.

<button onclick="handleProcessing()">
  Start processing

See the corresponding React event handling example.

<button onClick={handleProcessing}>
  Start Processing

For preventing a default event action, you need to explicitly call e.preventDefault().

function PreventDefaultExample() {
  function handleClick(e) {
    console.log('Link was clicked but default action was prevented.');

  return (
    <a href="#" onClick={handleClick}>
      Click this link

Just wanted to clarify that the e event in handleClick is not an original event emitted but a wrapper cross browser event created by React. It is also known as synthetic event.

React Event Listener best practice

In React we should not typically use addEventListener to a DOM element. Instead we provide the listener when the event is rendered.

One more important point, (this is not a react feature but Javascript feature). In Javascript class methods are not bound by default and you have to explicitly bind them.

class BindingExample extends React.Component {
  constructor(props) {
    this.state = {isSystemOn: true};

    // This binding is necessary to make `this` work in the callback
    this.handleClick = this.handleClick.bind(this);

  handleClick() {
    this.setState(state => ({
      isSystemOn: !state.isSystemOn

  render() {
    return (
      <button onClick={this.handleClick}>
        System Is {this.state.isSystemOn? 'ON' : 'OFF'}


See it live in action here.

Simple way to remember this is if you refer a method without () after it, such as onFocus={this.handleFocus}, you should bind this method. And a good place to bind it is in component class constructor.

How to pass arguments to event handlers in React

There are cases where you want to pass some arguments to React event handlers. Again bind comes to the rescue. You can pass and access as many arguments as you want as well as the event as last argument.

class Plan extends React.Component {
   handleClick(planName, planCategory, e) {
      alert('planName:'+ planName + ' planCategory:' + planCategory + ' event' + e);

   render() {
     let planName = 'Business Plan';
     let planCategory = 'Success';
     return (
              <button onClick={this.handleClick.bind(this,planName, planCategory)}>
                 Plan Me

ReactDOM.render(<Plan/>, document.getElementById('root'));

How useful was this post?

Click on a star to rate it!

Average rating 3.5 / 5. Vote count: 2

No votes so far! Be the first to rate this post.

As you found this post useful...

Follow us on social media!

We are sorry that this post was not useful for you!

Let us improve this post!

Tell us how we can improve this post?

0 0 votes
Article Rating
Notify of
Inline Feedbacks
View all comments