React not going to JavaScript function that is manually built

Question

I have a scenario in which I need to modify code from a promise to wrap a link around it.

I came up with this.

const modifiedValue = <a onClick={this.jsfunction(item.value)} href="javascript:void(0);">{item.value}</a>;

It is not working:

//function
jsfunction = (test) => {
   console.log('test', test)
}

I tried to bind in the constructor too:

this.jsfunction = this.jsfunction.bind(this);

Seems if I remove the onClick then it is worse, also removing the href, JavaScript: is that needed ?

Answer 1

The onClick handler should be the function to execute when clicked. Right now, you're setting the onClick whatever jsfunction resolves to. To make it work, change the onClick to: e => this.jsfunction(item.value)

Use:

const modifiedValue = <a onClick={e=>this.jsfunction(item.value)} href="javascript:void(0);">{item.value}</a>;