Arrow function should not return assignment?

Question

My code is working correctly in the app however, my eslint isn't liking it and is saying I should not return assignment. What is wrong with this?

<div ref={(el) => this.myCustomEl = el} />

Answer 1

The Fix:

<div ref={(el) => { this.myCustomEl = el }} />

The Explanation:

Your current code is equivalent to:

<div ref={(el) => { return this.myCustomEl = el }} />

You are returning the result of this.myCustomEl = el. In your code, this is not really a problem -- however, one of the most frustrating bugs in programming occurs when you accidentally use an assignment (=) instead of a comparator (== or ===), for instance:

let k=false;  
if(k=true){
  thisWillExecute();
}

In the above case, the compiler warning makes sense because k=true evaluates to true (as opposed to k===true, which is probably what you meant to type) and causes unintended behavior. Thus, eshint notices when you return an assignment, assumes that you meant to return a comparison, and lets you know that you should be careful.

In your case, you can solve this by simply not returning the result, which is done by adding enclosing brackets {} and no return statement:

<div ref={(el) => { this.myCustomEl = el }} />

You can also adjust the eshint warning like so: https://eslint.org/docs/rules/no-return-assign