Error in onClick event in react.js

Question

I am trying to use onclick event like below

<button className="mini ui button" onClick={this.view(item['id'])}>
   <i className="user icon"></i>
   View
</button>

This is creating error like below

But below code is not creating error

<button className="mini ui button" onClick={this.view}>
     <i className="user icon"></i>
     View
</button>

Possible duplicate of [React js onClick can't pass value to method](https://stackoverflow.com/questions/29810914/react-js-onclick-cant-pass-value-to-method) — Amanshu Kataria, Apr 28 '18 at 07:29

score 3 · Accepted Answer · answered Apr 28 '18 at 05:10

3

Change it to onClick={() => this.view(item['id'])}, otherwise the function gets executed immediately during rendering (instead of onClick), which causes repeated re-rendering if the function changes the state/props.

answered Apr 28 '18 at 05:10

Roy Wang

11,112
2
21
42

Thanks @riwu. I faced this issue, the function gets executed immediately during rendering. – abu abu Apr 28 '18 at 05:13
Thanks @riwu. Could you please explain this code `onClick={() => this.view(item['id'])}` ? I am new in react.js – abu abu Apr 28 '18 at 05:15
`onClick` accepts a function. I'm using ES6 arrow function: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions – Roy Wang Apr 28 '18 at 05:18

score 0 · Answer 2 · answered Apr 28 '18 at 06:09

0

Yes you can use arrow function as previews answer or you can use bind

<button className="mini ui button" onClick={this.view.bind(this, item['id'])}>
   <i className="user icon"></i>
   View
</button>

These two ways works.

answered Apr 28 '18 at 06:09

Laura delgado

362
2
8
21

Error in onClick event in react.js

2 Answers2