Monday, February 18, 2019

Passing parameters to arrow function in react js

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 :
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.

4 comments:

  1. Replies
    1. The e represents the synthetic event that is being passed to your handler. This e synthetic event is optional in this example.
      Browsers 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

      Delete
  2. good question , even i had doubt wat is e?

    ReplyDelete
    Replies
    1. The e represents the synthetic event that is being passed to your handler. This e synthetic event is optional in this example.
      Browsers 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

      Delete