I have a button with onclick in react like this:
<Button onClick={this.editApp} type='link'>
Edit
</Button>
when I added a parameter with the function, it will be execute imediate:
<Button onClick={this.editApp(record)} type='link'>
Edit
</Button>
why the onclick will execute imediate with a parameter? this is the function define:
editApp = (row) => {
this.setState({
isEditModalVisible: true,
editRowData: row
})
}
because the function will execute imediate, make it going into a dead loop. why would this happen and what should I do to fix it? does it mean it will be better way to write the onclick with an arrow function no matter it does a parameter or not?
It is executing immediately because you invoked it there. onClick expects a function and not its return value. If you want to pass argument to a function, then you should wrap it in another function.
<Button onClick={() => this.editApp(record)} type='link'>
Edit
</Button>
You need to create an anonymous function if you want to have a parameter passed in by default:
<Button onClick={() => this.editApp(record)} type='link'>
Edit
</Button>
The function is running immediately when the button is rendered because it is being called you need to wrap it in the anonymous function to work.
try this
<Button onClick={() => this.editApp(record)} type='link'>
Edit
</Button>