What is Arrow function?

arrow function allow us to write shorter function syntax.

const App = () => <h1>aroow function</h1>

it gets shorter, if the function has only one statement, and the statement returns a value, you can remove the brackets and the return keyword.

One line code in arrow function

arrow function allow us to write shorter function syntax.

//App.js file
const App = () => <h1>aroow function</h1>

it gets shorter, if the function has only one statement, and the statement returns a value, you can remove the brackets and the return keyword.

Multiline code in arrow function

const App = () => {
    return(
        <>
            <h1>aroow function</h1>
            <h2> heading two</h2>
        </>
    );
}

Props in arrow function

We can also create arrow function with parameters.
Arrow function were introduce in ES6.

Props in singleline arrow function

In these single line arrow function we write direct props at place of brackets() in that case if you write only one line code.

const App = (props) => <h1>{props.name}</h1>
//OR
const App = props => <h1>{props.name}</h1>

Props in multiline arrow function

const App = (props) => {
    return(
        <>
            <h1>{props.name}</h1>
            <h2> {props.age}</h2>
        </>
    );
}

HAPPY LEARNING

Arrow Function in React JS

Table of contents