How to resolve warning with ESlint: Disallow Assignment in return Statement (no-return-assign)?

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:

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

this.recaptchaRef

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();

this.recaptchaRef.reset();

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

2 Answers
2

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:

{

=>

event

this.recaptchaRef

event

ref={(event) => {
this.recaptchaRef = event;
}}


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;
}};


By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.