How to avoid binding by using arrow functions in callbacks in ReactJS?

In React class-based components when we use event handler callbacks, it is very important to give special attention to the 'this' keyword. In these cases the context this is undefined when the callback function actually gets invoked that's why we have to bind the context of this. Now if binding all the methods of each class is very annoying. Instead of binding we can use the inline arrow function since the arrow function does not have its own value of this, it uses the parent or public value. Using the inline arrow function we can get rid of annoying method binding every time and also the code looks very packed and organized.

Example 1: This example illustrates how to use arrow functions in callbacks

index.js:

App.js : 

Output :

Example 2 :

index.js : 

App.js : 

Output :