# ReactJS - Event management

Event management is one of the important features in a web application. It enables the user to interact with the application. React support all events available in a web application. React event handling is very similar to DOM events with little changes. Let us learn how to handle events in a React application in this chapter.

Let us see the step-by-step process of handling an event in a React component.

- Define an event handler method to handle the given event.

```
log() { 
   cosole.log("Event is fired"); 
}
```

<div class="open_grepper_editor" id="bkmrk-" title="Edit & Save To Grepper">  
</div>React provides an alternative syntax using lambda function to define event handler. The lambda syntax is −

```
log = () => { 
   cosole.log("Event is fired"); 
}
```

<div class="open_grepper_editor" id="bkmrk--0" title="Edit & Save To Grepper">  
</div>If you want to know the target of the event, then add an argument **e** in the handler method. React will send the event target details to the handler method.

```
log(e) { 
   cosole.log("Event is fired"); 
   console.log(e.target); 
}
```

<div class="open_grepper_editor" id="bkmrk--1" title="Edit & Save To Grepper">  
</div>The alternative lambda syntax is −

```
log = (e) => { 
   cosole.log("Event is fired"); 
   console.log(e.target); 
}
```

<div class="open_grepper_editor" id="bkmrk--2" title="Edit & Save To Grepper">  
</div>If you want to send extra details during an event, then add the extra details as initial argument and then add argument **(e)** for event target.

```
log(extra, e) { 
   cosole.log("Event is fired"); 
   console.log(e.target); 
   console.log(extra); 
   console.log(this); 
}
```

<div class="open_grepper_editor" id="bkmrk--3" title="Edit & Save To Grepper">  
</div>The alternative lambda syntax is as follows −

```
log = (extra, e) => { 
   cosole.log("Event is fired"); 
   console.log(e.target); 
   console.log(extra); 
   console.log(this); 
}
```

<div class="open_grepper_editor" id="bkmrk--4" title="Edit & Save To Grepper">  
</div>Bind the event handler method in the constructor of the component. This will ensure the availability of *this* in the event handler method.

```
constructor(props) { 
   super(props); 
   this.logContent = this.logContent.bind(this); 
}
```

<div class="open_grepper_editor" id="bkmrk--5" title="Edit & Save To Grepper">  
</div>If the event handler is defined in alternate lambda syntax, then the binding is not needed. *this* keyword will be automatically bound to the event handler method.

Set the event handler method for the specific event as specified below −

```
<div onClick={this.log}> ... </div>
```

<div class="open_grepper_editor" id="bkmrk--6" title="Edit & Save To Grepper">  
</div>To set extra arguments, bind the event handler method and then pass the extra information as second argument.

```
<div onClick={this.log.bind(this, extra)}> ... </div>
```

<div class="open_grepper_editor" id="bkmrk--7" title="Edit & Save To Grepper">  
</div>The alternate lambda syntax is as follows −

```
<div onClick={this.log(extra, e)}> ... </div>
```

<div class="open_grepper_editor" id="bkmrk--8" title="Edit & Save To Grepper">  
</div>Here,

- [Create a event-aware component](https://www.tutorialspoint.com/reactjs/reactjs_create_event_aware_component.htm)
- [Introduce events in Expense manager app](https://www.tutorialspoint.com/reactjs/reactjs_introduce_events_expense_manager_app.htm)