Arrow function in javascript

const sum = (a, b) => a + b;

console.log(sum(2, 5));

Output: 7

Github link : https://github.com/adi501/JavaScriptExamples.git

 

React passing parameter via onclick event using Arrow function

• Create Components folder under src folder
• Add PassingParameterViaOnclick2.js file and add below Code

import React from "react";

import { Button, Text, View } from "react-native";

const onClickEvent = id => {

  alert(id);

};

const PassingParameterViaOnclick2 = () => {

  return (

    <View>

      <Text>

        React passing parameter via onclick event using Arrow function

      </Text>

      <Button

        title="Submit"

        value="buttonValue"

        onPress={() => {

          onClickEvent(10);

        }}

      />

    </View>

  );

};

export default PassingParameterViaOnclick2;

• Open App.js file and update code as below\

import React from 'react';

import { View,StyleSheet } from 'react-native';

import PassingParameterViaOnclick2 from './src/components/PassingParameterViaOnclick2'

 const  App=()=> {

  return (

    <View style={styles.container}>

      <PassingParameterViaOnclick2/>

    </View>

  );

}

export default App;

const styles = StyleSheet.create({

  container: {

    flex: 1,

    backgroundColor: '#fff',

    alignItems: 'center',

    paddingTop:80

  },

});

Output:

Arrow Function in React JS

• Create Components folder under src folder
• Add ArrowFunctions.js file and add below Code

import React, { Component } from "react";

class ArrowFunctions extends Component {

constructor(props) {

super(props);

this.state = {

Name: "Adi"

};

}

changeName = () => {

this.setState({ Name: "Adi JC" });

};

render() {

return (

<div>

Arrow Functions

<p>{this.state.Name}</p>

<button onClick={this.changeName}>Click me</button>

</div>

);

}

}

export default ArrowFunctions;

• Open index.js file and update code as below

import React from "react";

import ReactDOM from "react-dom";

import "./styles.css";

import ArrowFunctions from "./Components/ArrowFunctions";

function App() {

return (

<div className="App">

<ArrowFunctions />

</div>

);

}

const rootElement = document.getElementById("root");

ReactDOM.render(<App />, rootElement);

Output: