1

I'm using the following package in my React application to generate a Recaptcha component: https://github.com/appleboy/react-recaptcha

Here is what the component looks like, with the eslint warning: ESlint warning code block

this.recaptchaRef is defined like so: this.recaptchaRef = React.createRef();

This ref allows me to reset the Recaptcha when there is an error with my form like so: this.recaptchaRef.reset();

How would I be able to resolve this error without writing ESlint comments?

Ralph David Abernathy
  • 5,230
  • 11
  • 51
  • 78

2 Answers2

3

Arrow functions, if there is no { following the =>, will return whatever expression follows. At the moment, your arrow function is assigning event to this.recaptchaRef and returning event. (even if the consumer completely ignores the return value, it'll still generate a linting error.) So, just use curly brackets to ensure nothing is returned:

ref={(event) => {
  this.recaptchaRef = event;
}}
CertainPerformance
  • 356,069
  • 52
  • 309
  • 320
1

As per documentation of Arrow functions they can have either a "concise body" or the usual "block body".

In a concise body, only an expression is specified, which becomes the explicit return value. In a block body, you must use an explicit return statement.

So in the example that you are using, "concise body" is specified. Concise body means there is no surrounding curl braces. Hence even if there if no return keyword the expression is returned. Since you want to avoid returning the expression so you need to change the body to "block body" i.e. specify curl braces after => operator i.e.

ref = {event => {
    this.recaptchaRef = event;
}};
GauravLuthra
  • 1,027
  • 9
  • 8