using functional expressions as eventhandlers in Reactjs

Question

const templateTwo = (
    <div>
    <h1>Count :{count}</h1>
    <button  className="button" onClick={minusOne}>-1</button>
    <button onClick={function name() {
      console.log("nnn")
    }}>Reset</button>
    </div>
)

1) According to the JSX

You can put any valid JavaScript expression inside the curly braces in JSX.

2) but while reading docs for eventHandler in React i came across the following

 JSX you pass a function as the event handler, rather than a string.

3) Until here everyThing looks great but now in my above code i had used functional statement as EventHandler but it worked i am confused as per docs we have to use functional expressions inside {}

4) How it worked can we use functional statments inside {} (in jsx )

JLRishe · Accepted Answer · 2020-04-17 18:52:56Z

1

Depending on the context, function name() { } could be either a function declaration or a function expression.

var a = function name() { };  // <-- function expression

function name() { }           // <-- function declaration

JSX expects an expression within the {} here, so it is interpreted as a function expression.

You could also do this, with an arrow function (which is surely more common):

<button onClick={() => {
  console.log("nnn")
}}>Reset</button>

For all intents and purposes this is essentially the same as your version with the function keyword.

edited Apr 17, 2020 at 18:52

answered Apr 17, 2020 at 18:45

JLRishe

102k19 gold badges138 silver badges171 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

m.d venkatesh Over a year ago

So you mean if i pass a functional statment also it evaluates to functional expression correct me if i am wrong

JLRishe Over a year ago

@m.dvenkatesh I'm not really sure what you mean by "functional statement". Contexts that expect an expression will treat function name() { } as an expression because that is valid syntax for a function expression.

m.d venkatesh Over a year ago

correct me if i am wrong i am referring to functional Declartion as functional statement

JLRishe Over a year ago

@m.dvenkatesh Ok. As I said above, that syntax could be a declaration or an expression depending on the situation. In this situation, it's an expression. This is not something that is specific to React.

JLRishe Over a year ago

@m.dvenkatesh MDN documentation: here, JavaScript.info: here

|

Bhojendra Rauniyar · Accepted Answer · 2020-04-17 19:05:01Z

1

The code you use is an expression.

// Function declaration:
function doStuff() {};

// Function expression:
const doStuff = function() {}

So, you're using a function expression and works just fine as others:

onClick={function name() {console.log("nnn")}}

1 Comment

m.d venkatesh Over a year ago

Thanks it means anyThing in {} in jsx will resove to value so we can use anything (functional Statment or functional Ecpression)if we don't resove to value then it is a problem

Collectives™ on Stack Overflow

using functional expressions as eventhandlers in Reactjs

2 Answers 2

8 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related