If I write like this, click button works
<Menu.Item
key={book.uid}
onClick={() => this.changeColor(book)}
>
But if I write like this:
onClick={this.changeName(book)}
the click doesn't work.
So if the function has arguments, I should use "() => xxx(argument); otherwise, I can just use "this.xxx", right?
Because doing this.changeName(book) will instantly call the function when rendering. And what your function returns is.. not a function, so when you click, nothing will happen.
And () => this.changeColor(book) is an arrow function, it has a similar (but not really) behavior as this syntax :
() => { this.changeColor(book) }
To avoid this, you could use your first code example or transform your function into a curried one and keep the second syntax in the render :
changeName = bookInfo => event => {
/* Your code here */
}
When called once in the render, this function will return another function receiving the event and set the bookInfo first.
