Arrow function should not return assignment no-return-assign

Question

My code is working correctly in the app however, before commit husky runs and gives out the error saying "Arrow function should not return assignment no-return-assign"

           <Field name='dob' label='dateOfBirth'
              placeholder=''
              onFocus={(e) => e.target.placeholder = 'MM/YYYY/DD'}
            />

Answer 1

If you omit the brackets in your arrow function, it will implicitly return the statement. In this case, the compiler is warning you that you are returning the assignment, which is not allowed (I'm guessing to avoid a situation where you are attempting to check for equality and mistakenly type only a single = instead of === )

You can surround the function body in brackets to avoid this issue:

onFocus={(e) => { e.target.placeholder = 'MM/YYYY/DD'} }

Check out the MDN for more information on arrow functions.

Answer 2

As several people mention in comments, the issue is that you're using

(e) => e.target.placeholder = 'MM/YYYY/DD'

which is roughly equivalent to

anon_func = function (e) {
    return e.target.placeholder = 'MM/YYYY/DD';
}

because (args) => <expression> means to evaluate the expression and return the result.

Contrary to jakemingolla's answer, this is legal; it returns 'MM/YYYY'DD' which doesn't matter in this situation since you don't care about any return value. That's why it "works". But it is generally regarded as poor style, which is why your pre-commit checks flag it.

What you want is (args) => {<function-body>} , which (like any directly-declared function body) just returns undefined if you don't explicitly return something. That is

(e) => {e.target.placeholder = 'MM/YYYY/DD';}

is roughly like

anon_func = function (e) {
    e.target.placeholder = 'MM/YYYY/DD';
}

which is what you want.