Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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 ?

like image 641
Ichrak Mansour Avatar asked Jun 30 '20 08:06

Ichrak Mansour


People also ask

How does an arrow function return a value?

The most common and standard way of returning an object from an arrow function would be to use the longform syntax: const createMilkshake = (name) => { return { name, price: 499 }; }; const raspberry = createMilkshake('Raspberry'); // 'Raspberry' console.

Can arrow function have return?

Arrow functions can have either a concise body or the usual block body. In a concise body, only an expression is specified, which becomes the implicit return value. In a block body, you must use an explicit return statement.

Does arrow function return value by default?

Arrow Functions Return Value by Default: Note: This works only if the function has only one statement.

How do you return an object in arrow?

When returning an object from an arrow function, it seems that it is necessary to use an extra set of {} and a return keyword because of an ambiguity in the grammar. That means I can't write p => {foo: "bar"} , but have to write p => { return {foo: "bar"}; } .


2 Answers

Changing {} to () worked for me

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

like image 199
heremyas Avatar answered Oct 28 '22 09:10

heremyas


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

like image 30
Rahul Bhobe Avatar answered Oct 28 '22 11:10

Rahul Bhobe