CODEWITHSUNDEEP
javascriptreactjseslinteslint-config-airbnb
SDK
SDK

Reputation: 1518

Arrow function should not return assignment Eslint

I am map'ing a value that is returned from API and adding a dummy value as defensive code if value is not present. For that i am using JS Map to obtain the result. But unfortunately i am getting eslint error Arrow function should not return assignment . Here i am sharing the code of what i implemented. Pls check and advice me the best solution. I dont want to disable the eslint errors. Thanks in Advance.

Code:

 const chartData = res.data.map(
    (data) => data.latestMetric = data.latestMetric === null ? dummyLatestMetric : data.latestMetric
  );

Error:

Arrow function should not return assignment. eslint (no-return-assign)

Upvotes: 5

Views: 9961

Answers (4)

Ivan86
Ivan86

Reputation: 5708

You need to return the value:

const chartData = res.data.map((data) => {
  data.latestMetric = data.latestMetric === null ? dummyLatestMetric : data.latestMetric;
  return data;
});

Upvotes: 0

Jee Mok
Jee Mok

Reputation: 6556

Arrow Function

An arrow function expression is a syntactically compact alternative to a regular function expression, although without its own bindings to the this, arguments, super, or new.target keywords. Arrow function expressions are ill suited as methods, and they cannot be used as constructors.

Map Function

The map() method creates a new array populated with the results of calling a provided function on every element in the calling array.

.map() function would require you to return a value for every iteration. If you only want to loop through an array to do side effects, you can consider forEach or other loop function.

In your case, I see you want to modify the latestMetric in res.data conditionally, you can do this:

const chartData = res.data.map(data => ({
  ...data,
  latestMetric: data.latestMetric === null ? dummyLatestMetric : data.latestMetric,
});

The spread syntax will spread the data properties into a new object, and then we conditionally set the value of latestMetric based on the condition

If you don't want to use the spread syntax, you can also use the traditional Object.assign method:

const chartData = res.data.map(data => Object.assign({}, data, {
  latestMetric: data.latestMetric === null ? dummyLatestMetric : data.latestMetric,
});

About your defensive strategy, you might be interested in using || syntax for that, but be careful as it validates for all falsy values (it includes: false, 0, null, undefined, etc.)

const chartData = res.data.map(data => ({
  ...data,
  latestMetric: data.latestMetric || dummyLatestMetric,
});

Last but not least, it might be better for you to understand the ESLint rule first, and read the reason behind that coding practice, to see if you want to use that rule, or modify it or even disable it for your project.

Ref: https://eslint.org/docs/rules/no-return-assign

Upvotes: 2

qiAlex
qiAlex

Reputation: 4346

The problem:

https://eslint.org/docs/rules/no-return-assign

This rule tells that you are not permitted to return an assign operations like this: 

return a = 3 // or similar.

But this is exactly what you are doing, so

The trick is to return an object/property, but not an assigning operation =.

It's not clear what do you interesting in to be returned in .map, do you want to return the whole data or only data.latestMetric, so my answer also consists of two cases:

if you need to modify data and return it, try this:

const chartData = res.data.map(
  data => (data.latestMetric = data.latestMetric === null ? dummyLatestMetric : data.latestMetric) && data
  // updated data.latestMetric and then returning a whole object
);

if you need only data.latestMetric then try this:

const chartData = res.data.map(
  data => data.latestMetric === null ? dummyLatestMetric : data.latestMetric
);

Upvotes: 0

jonowles
jonowles

Reputation: 466

Since you are not explicitly returning a value from the arrow function, eslint wants you to use a function with a body.

This should fix it: 

 const chartData = res.data.map(
    (data) => {
      data.latestMetric = data.latestMetric === null ? dummyLatestMetric : data.latestMetric;
 });

Upvotes: 0

Related Questions