javascript - How to avoid JS USELESS_ARROW_FUNC_BIND error in Storybook Template

Question

Here is the sample code for a story in Storybook 6.0:

const Template = (args) => <Button {...args} />;

// Each story then reuses that template
export const Primary = Template.bind({});

But, Template.bind fails the USELESS_ARROW_FUNC_BIND test in DeepScan static analysis:

Is there a way of avoiding this linter issue? I tried Template({}) but the compiler failed that, indicating the context parameter was missing.

question from:https://stackoverflow.com/questions/65883518/how-to-avoid-js-useless-arrow-func-bind-error-in-storybook-template

Answer 1

The const Template = (args) => <Button {...args} />; line shows that the Template doesn't make use of this.

However, there is a Template.bind({}) that assigns this to {} during the execution of the WithMarker function.

As this is not being used, you could replace export const WithMarker = Template.bind({}) with export const WithMarker = Template.