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.
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.