How to resolve "react/jsx-no-bind" in Stencil context.

[frerepoulet]

As per the recommendations on the stencil docs I use the binding/arrow function quite often on elements. What would be the best way to resolve the "react/jsx-no-bind" rule. I have seen their documentation but I can't seem to understand how the solutions could be applied in the context of Stencil components. This rule has been added intentionally to the stencil rules so I assume there is a solution to this, I just can't find it.

let item = "value";
<div onClick={() => self.select(item)}</div>

warning JSX props should not use arrow functions react/jsx-no-bind

[kasitmp]

Would this maybe work for you?

private select = (item) => {
...
}

render () {
let item = 'value';
return <div onClick={this.select(item)} />
}

[ionitron-bot]

Thanks for the issue! This issue is being closed due to inactivity. If this is still an issue with the latest version of Stencil, please create a new issue and ensure the template is fully filled out.

Thank you for using Stencil!

[rwaskiewicz]

Ah, some of these issues are so old that they're getting cleared automatically. Sorry about that!