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

Viewed 54520

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 ?

7 Answers

Changing {} to () worked for me

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

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

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

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.

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!

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

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
))
Related