This tutorial explains how to pass parameters to arrow function in react js application. Implementation of passing parameters to arrow function is bit different in react application. Lets see the below example that helps to build more understanding on arrow function.
Passing single parameter in arrow function :
Passing two parameters in arrow function :
Output :
----------------
This is all about Passing parameters to arrow function in react js. Thank you for reading this article, and if you have any problem, have a another better useful solution about this article, please write message in the comment section.
Passing single parameter in arrow function :
oneParameter = a => e => { alert(a); };
Passing two parameters in arrow function :
twoParameter = (a, b) => e => { alert(a + b); };
Passing parameter in arrow function :
import React from "react"; import ReactDOM from "react-dom"; import "./styles.css"; class App extends React.Component { oneParameter = a => e => { alert(a); }; twoParameter = (a, b) => e => { alert(a + b); }; render() { return ( <div> <button onClick={this.oneParameter(32)}> one parameter </button> <br /> <br /> <button onClick={this.twoParameter(10, 54)}> two parameter</button> </div> ); } } const rootElement = document.getElementById("root"); ReactDOM.render(<App />, rootElement);
Output :
----------------
This is all about Passing parameters to arrow function in react js. Thank you for reading this article, and if you have any problem, have a another better useful solution about this article, please write message in the comment section.
what is e ?
ReplyDeleteThe e represents the synthetic event that is being passed to your handler. This e synthetic event is optional in this example.
DeleteBrowsers have generally had a few differences in how their DOM event implementations work. React provides its own event system so that they work the same way in every browser. Your event handlers will be passed instances of SyntheticEvent, a cross-browser wrapper around the browser’s native event. It has the same interface as the browser’s native event, including stopPropagation() and preventDefault(), except the events work identically across all browsers.
Every SyntheticEvent object has the following attributes:
boolean bubbles
boolean cancelable
DOMEventTarget currentTarget
boolean defaultPrevented
number eventPhase
boolean isTrusted
DOMEvent nativeEvent
void preventDefault()
boolean isDefaultPrevented()
void stopPropagation()
boolean isPropagationStopped()
DOMEventTarget target
number timeStamp
string type
good question , even i had doubt wat is e?
ReplyDeleteThe e represents the synthetic event that is being passed to your handler. This e synthetic event is optional in this example.
DeleteBrowsers have generally had a few differences in how their DOM event implementations work. React provides its own event system so that they work the same way in every browser. Your event handlers will be passed instances of SyntheticEvent, a cross-browser wrapper around the browser’s native event. It has the same interface as the browser’s native event, including stopPropagation() and preventDefault(), except the events work identically across all browsers.
Every SyntheticEvent object has the following attributes:
boolean bubbles
boolean cancelable
DOMEventTarget currentTarget
boolean defaultPrevented
number eventPhase
boolean isTrusted
DOMEvent nativeEvent
void preventDefault()
boolean isDefaultPrevented()
void stopPropagation()
boolean isPropagationStopped()
DOMEventTarget target
number timeStamp
string type