Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

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.
                This arrow function in the argument does return a promise. developer.mozilla.org/en-US/docs/Web/API/Response
– croraf
                Jan 9, 2018 at 11:50
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.
Try Changing map(() => {}) to map(() => ())
{} -  Creates a code block that expects an explicit return statement.

With () -  implicit return takes place.
                {} - Creates a code block that expects an explicit return statement. that hint solved my issue. i added return to the final value
– user_che_ban
                Jan 2, 2021 at 10:26
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);
                It expects you to return a value for an element of the array and that will be called for every element. So maybe "after you transformed the element" would make sense. Also map() does not mutate the array. It creates a new one.
– trixn
                Jan 9, 2018 at 8:56
  
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()
                Returning the console log will fix the error but as console.log() does return undefined you would get an array of undefined values which will be quiet useless. forEach() is the best choice in this case.
– trixn
                Jan 9, 2018 at 8:51
                While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference.  Link-only answers can become invalid if the linked page changes. - From Review
– revengeance
                Dec 23, 2021 at 16:52
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} />
        <h4>{name}</h4>        
        <p>{age} Years</p>
        </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} />
        <h4>{person.name}</h4>        
        <p>{person.age} Years</p>
        </article>
        </return>
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.