In today’s blog, we will learn about Arrow Functions in ReactJS. Let us find out What are Arrow Functions and how they are used in ReactJS.
What is Arrow Function in ReactJS?
How to Use Arrow Functions in React?
- In React, arrow functions are used as an alternative to functions within class components, functional components, and event handlers.
- Arrow functions are anonymous. You do not need to use the “function” keyword while defining them.
- All arguments passed into an arrow function must be pre−defined
Limitations of Arrow Functions:
An arrow function expression is a compressed alternative to a regular function expression. But it also has some limitations in usage:
- Arrow functions don’t have their own bindings to this, arguments, or super, and should not be used as methods.
- Arrow functions cannot be used as constructors. Calling them with new throws a TypeError. They also don’t have access to the new.target keyword.
- Arrow functions cannot use yield within their body and cannot be created as generator functions.
Example of Arrow Function:
// function expression
Let X = function (X,Y)
return X * Y
// using arrow function
Let X = (X, Y) => X * Y ;
Let greet = () => console.log(“Hello’);
Arrow Function With Parameters:
hello = (val) => "Hello " + val;
let names = ['John', 'Mac', 'Peter'];
let lengths = names.map(name => name.length);
This was all about Arrow Function in ReactJS. To learn more about React, follow ReactJS blogs and stay updated. Share the article with your friends, and comment down your doubts or queries.