CODEWITHSUNDEEP
javascriptarraysecmascript-6arrow-functions
Chef1075
Chef1075

Reputation: 2724

Expected to return a value in arrow; function array-callback-return. Why?

I'm having some issues understanding why I'm getting a compile warning on this piece of my react code

fetch('/users')
        .then(res => res.json())
        .then(data => {
            data.map(users => {
                console.log(users);
            });
        });

The warning I'm getting is Expected to return a value in arrow function array-callback-return

However I'm still get the json object values from my /users, and they are printed to the console individually. The object is: 

    {
        id: 1,
        username: "Foo"
    }, {
        id: 2,
        username: "Bar"
    }

Am I missing a return statement, or am I missing something with how map returns values after a .then()? I'm unclear on why the compile warning would appear at all.

Upvotes: 47

Views: 116405

Answers (7)

Alebiosu Wahab Adewale
Alebiosu Wahab Adewale

Reputation: 37

it's brings this error complain when i destruction like this

{ people.map((person) => (
const [id,name,age,image] = person;
        <return>
            <article className='person' key={id}>
            <img src={image} alt={name} />
            <div>      
        <h4>{name}</h4>        
        <p>{age} Years</p>
            </div>
        </article>
        </return>
  ))}

so i now do it this way without destruction and its work for me

{ people.map((person) => (
        <return>
            <article className='person' key={person.id}>
            <img src={person.image} alt={person.name} />
            <div>      
        <h4>{person.name}</h4>        
        <p>{person.age} Years</p>
            </div>
        </article>
        </return>
  ))}

Upvotes: 1

kalpana udara
kalpana udara

Reputation: 71

You can use this method mapping data map(() => ()) instead of this map(() => {})

Upvotes: 1

Sumit Kumar
Sumit Kumar

Reputation: 11

Should be a implicit return use () in place for {}.

try this

fetch('/users')
    .then(res => res.json())
    .then(data => {
        data.map(users => (
            console.log(users);
        ));
    });

Upvotes: 1

Mayuresh Srivastava
Mayuresh Srivastava

Reputation: 1422

Try Changing map(() => {}) to map(() => ())

{} - Creates a code block that expects an explicit return statement.
With () - implicit return takes place.

Upvotes: 52

croraf
croraf

Reputation: 4730

Your specific example is:

data.map(users => {
   console.log(users);
});

Where data is the following array:

[
  {id: 1, username: "Foo"},
  {id: 2, username: "Bar"},
]

data.map function (check Array.prototype.map specification) converts one array (data in your case) to a new array. The conversion (mapping) is defined by the argument of data.map, also called the callback function. In your case, the callback function is the arrow function users => {console.log(users);}. The callback function of data.map must return a value. By returning a value for each item of the array is how data.map defines the mapping.

But in your case the callback function does not return anything. Your intention is not to do any kind of mapping, but just to console.log. So in your case you can use data.forEach (Array.prototype.forEach) as you don't use data.map functionality.

NOTE: Also you should have singular (rather than plural) name for the parameter of the callback function: data.map(user => {console.log(user);}); as this parameter is set to the individual element from the old array.

Upvotes: 67

Cecil
Cecil

Reputation: 351

From MDN:

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

That means the map method has to be returned. So,you should change your code like this:

fetch('/users')
    .then(res => res.json())
    .then(data => {
        data.map(users => {
            return console.log(users);
        });
    });

or use forEach() instead of map()

Upvotes: 9

Rodius
Rodius

Reputation: 2311

If you don't need to mutate the array and just do the console.log() you can do data.forEach() instead. It shouldn't give you the warning. Map expects you to return a value after you've transformed the array.

fetch('/users')
        .then(res => res.json())
        .then(data => {
            data.forEach(users => {
                console.log(users);
            });
        });

Upvotes: 20

Related Questions