What is Arrow function in React ? How is it used ?

  • They are more of a brief syntax for writing the function expression. It is also known as ‘fat arrow ‘(=>) the functions.
  • This keyword represented the object that called the function, which could be the window, the document, a button or whatever in a regular function.
  • It allows to bind the context of the components properly since in ES6 auto binding is not available by default.
  • While working with the higher-order functions, Arrow functions are most useful.
  • This keyword always represents the object that defined the arrow function in arrow function.

For example, in regular functions:

class Header {
  constructor() {
    this.color = "Blue";
  }

//Regular function:
  changeColor = function() {
    document.getElementById("demo").innerHTML += this;
  }
}

const myheader = new Header();

//The window object calls the function:
window.addEventListener("load", myheader.changeColor);

//A button object calls the function:
document.getElementById("btn").addEventListener("click", myheader.changeColor);

For example, in Arrow functions:

class Header {
  constructor() {
    this.color = "Blue";
  }

//Arrow function:
  changeColor = () => {
    document.getElementById("demo").innerHTML += this;
  }
}

const myheader = new Header();


//The window object calls the function:
window.addEventListener("load", myheader.changeColor);

//A button object calls the function:
document.getElementById("btn").addEventListener("click", myheader.changeColor);
Leave a Reply

Your email address will not be published.

You May Also Like

What is React DOM ?

It is an object which exposes a number of top level APIs to interact with the browser DOM. It provides DOM-specific methods that can be used at the top level…
View Answer

What is Flux ?

It is an application architecture that Facebook makes use of internally for constructing the client-side web application with React . It is a programming concept, where the data is a…
View Answer

What is React Hooks ?

Hooks are the new feature added in the React 16.8 It lets you use state and different React functions without writing a class. React concepts does not replace your knowledge.…
View Answer