<a onClick is calling without clicking

Question

I should use

<a href="url">Something/>

So when I click on it, it redirects me to my URL.

But now I wanna do the same with the onClick method (to use my router).

In my code I try to use it:

<a onClick={this.changeRoute()}>Something/>

But this redirects me directly without clicking on it .... I expect that the results are that it calls my function after I click on it. What don't I understand?

Answer 1

Because you are calling it right away. Remove () from html.

Should be like this: <a onClick={this.changeRoute}>Something/>

Answer 2

With parenthesis, you execute the function. To solve your problem, remove it.

<a onClick={this.changeRoute}>Something</a>

Answer 3

By using parentheses you are executing the function and passing the result as the thing to be executed. You are basically saying execute this.changeRoute() and onClick do the result of this.changeRoute() . Instead you want to do this.changeRoute() onClick. You can either do

<a onClick={(e) => this.changeRoute()}>Something</a>

or

<a onClick={this.changeRoute}>Something</a>

This first example "ensures this is bound within" changeRoute. Otherwise you will have to call a bind function on the function in the second example.

The second example passed the actual function instead of the result of the function.

In other examples, you may want to return a function when this.changeRoute is called, in which case your syntax would work just fine, because you would indeed be using the return value as the function to be called.

For more information take a look at https://reactjs.org/docs/handling-events.html .