why the onclick with parameters will execute imediate in react

Question

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?

Answer 1

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>

Answer 2

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>