How to fix "Expected to return a value in arrow function" with reactjs?

Question

I have two function in my react-app components

componentDidMount() {
        if(Object.keys(this.props.praticiens).length>0)
            Object.keys(this.props.praticiens).map((praticien) => {
                if(this.props.praticiens[praticien].identifiant_user === getUrlParams(window.location.hash).identifiant_user)
                    this.setState({
                        praticien:this.props.praticiens[praticien].id_user
                    })
            })
    }

    handleChangePraticien = (praticien) => {
        this.setState({ praticien }, () => {
            Object.keys(this.props.praticiens).map((praticien) => {
                if(this.state.praticien === this.props.praticiens[praticien].id_user)
                    this.props.selectPraticienFunction(this.props.praticiens[praticien].identifiant_user);
            })
        })
    }

When I run it, I get:

Line 26:64:  Expected to return a value in arrow function  array-callback-return
  Line 36:64:  Expected to return a value in arrow function  array-callback-return

Such as the Line 26 is beginning Object.keys(this.props.praticiens).map((praticien) => { on componentDidMount and Line 36 is the same line on the handleChangePraticien function

How can I fix it ?

Your if statements need brackets `{}`. You can only remove them if the line inside the if statement is a single line. — Reyno, Jun 30 '20 at 08:40
@theblackgigant - Single *statement*, not single line. They're all single statements. (That said, I much prefer always using `{}` on control-flow statmenets.) — T.J. Crowder, Jun 30 '20 at 08:42

score 73 · Answer 1 · answered Nov 23 '20 at 12:28

73

Changing {} to () worked for me

from map(() => {}) to map(() => ())

answered Nov 23 '20 at 12:28

heremyas

863
6
4

2

It worked for me. Can you explain the difference? – Amal lal T L Feb 11 '22 at 15:40
Fail to see why on Earth it's the highest-voted answer. Not only it's a "magic dust" one, but also it never mentions the fact that "fixing" the code this way doesn't actually prevent the return value spoilage, as `map` return value itself is never used. – raina77ow May 11 '22 at 08:14

score 53 · Accepted Answer · answered Jun 30 '20 at 08:45

Line 26:64: Expected to return a value in arrow function array-callback-return

Since you do not care about returning a value from the arrow function and you are not using the array returned by the map(), you should be using forEach() function instead.

componentDidMount() {
        if(Object.keys(this.props.praticiens).length>0)
            Object.keys(this.props.praticiens).forEach((praticien) => {
                if(this.props.praticiens[praticien].identifiant_user === getUrlParams(window.location.hash).identifiant_user)
                    this.setState({
                        praticien:this.props.praticiens[praticien].id_user
                    })
            })
    }

    handleChangePraticien = (praticien) => {
        this.setState({ praticien }, () => {
            Object.keys(this.props.praticiens).forEach((praticien) => {
                if(this.state.praticien === this.props.praticiens[praticien].id_user)
                    this.props.selectPraticienFunction(this.props.praticiens[praticien].identifiant_user);
            })
        })

score 16 · Answer 3 · edited Dec 30 '21 at 19:20

The Array.prototype.forEach() and Array.prototype.map() are used for two differents purposes.

Array.prototype.forEach()

The Array.prototype.forEach is used to simply loop over an array's items but doesn't return any special value. Its signature is :

forEach(callback, [thisArg]) => undefined

Only the first argument callback is mandatory and its signature is (current [, index, array]) => void where the only required argument is current

Example

[1,2,3].forEach( item => console.log(item))
// Output 1 2 3 undefined

Array.prototype.map()

This function is mostly used to create a new Array from an other one. Unlike the forEach function, it returns an Array. Its signature is the following:

map(callback [, thisArg]) => Array. Just like forEach, only the first argument is mandatory but the callback signture is different: (current [, index, array]) => any. The final array will contain every value returned by the callback after each iteration.

Example

[1,2,3].map(item => item ** 2)
// Output [1 4 9]

More informations over there:

Array.prototype.forEach()

Array.prototype.map()

score 9 · Answer 4 · answered Jun 30 '20 at 08:39

9

You're using map as though it were forEach. Don't use map unless you're going to use the array it creates from the return values of the callback. Use forEach, for-of, or any of the many other ways to loop through arrays described in this answer.

answered Jun 30 '20 at 08:39

T.J. Crowder

1,031,962
187
1,923
1,875

score 1 · Answer 5 · answered Feb 10 '22 at 21:55

If you need to return an array, but also place conditionals in the loop so that some items may not be returned you can combine .forEach with .push like this:

class Profiles extends Component {
  profilesArray() {
    let profiles_array = [];

    this.props.profiles.forEach((profile) => {
      // some condition
      if (profile.id !== this.props.whatever) {
        profiles_array.push(
          <ContentCard key={profile.profile_id}>
            <p>My Content</p>
          </ContentCard>
        );
      }
    });

    return profiles_array;
  }
  render() {
    return (
      <>
        <h1>Profiles</h1>
        {this.profilesArray()}
      </>
    );
  }
}

score 1 · Answer 6 · edited Aug 16 '22 at 20:10

1

You need to return something for each iteration when you iterate a map, so I suggest making these alterations:

list.map(() => {
   return (
    // block of code to be executed
   )
})

or simply

list.map(() => (
    // block of code to be executed
))

edited Aug 16 '22 at 20:10

Ivan Shumilin

1,743
3
13
18

answered Aug 11 '22 at 18:10

pryansh

197
1
8

score 0 · Answer 7 · answered Nov 26 '21 at 23:29

this is just one of Errors: Array.prototype.map() expects a return value from arrow function.eslintarray-callback-return

{cableCars.map((cableCar: typeCblCar) => {
  <CableCar key={cableCar.id} cableCar={cableCar} dispatch={dispatch} />
})}

Does not work, but this implicite return works perfect:

{cableCars.map((cableCar: typeCblCar) => (
  <CableCar key={cableCar.id} cableCar={cableCar} dispatch={dispatch} />
))}

This was my problem with useReducer in TypeScript. The answer gived by heremyas solve my agony So from my over-complicated workaround this is pure beauty. Thanks heremyas and long live stackoverflow!

score 0 · Answer 8 · answered Apr 17 '23 at 06:08

Just change {} with ()

In a React application, the "map" is often used to render components as the return value. Like in this example using parentheses for indicating a direct return call.

previewPosts?.map((post, i) => (
    <PostCard key={post.id} {...{post, num: i }} />
))

or like this using brackets with an explicit return call.

previewPosts?.map((post, i) => {
    return (
        <PostCard key={post.id} {...{post, num: i }} />
    )
})

If you are not returning anything using either of these techniques, then the "Expected a return value in arrow function" error will be thrown.

score -1 · Answer 9 · edited Jun 16 '23 at 20:26

-1

return this.props.selectPraticienFunction(this.props.praticiens[praticien].identifiant_user)

edited Jun 16 '23 at 20:26

asportnoy

2,218
2
17
31

answered Jun 16 '23 at 11:00

shobhit singh

1

How to fix "Expected to return a value in arrow function" with reactjs?

9 Answers9