React JSX error expected a return value at the end of the arrow function

Question

I am running this code:

books.map(({ subjects, formats, title, authors, bookshelves }, index) => {
                subjects = subjects.join().toLowerCase();
                author = authors.map(({ name }) => name).join();
                if (!text && subjects.includes(category) === true) {.....some code....
                }
});

Expected to return a value at the end of arrow function array-callback-return at line 1 in the above code. I tried to return but it is not working. Is it ok if I ignore these warnings? I am using this for production, do I need really need to solve this, or is it ok to leave it.

Answer 1

map does expect a return value and is considered an anti-pattern when not using it to build an array. It's probably ok, but better to use forEach instead.

Example using forEach:

 [{subjects: ['history', 'math'], authors: [{name: 'author 1'},{name: 'author 2'}]}].forEach((item) => { let subjects = item.subjects.join().toLowerCase(); let authors = item.authors.map(({ name }) => name).join(); console.log(subjects, authors); });

Answer 2

It expects a return value because you are using .map , use .foreach instead. You can learn more here: Map vs. ForEach

Answer 3

If you don't want to return a value, you can use forEach to get rid of the warning.

return null; will also do the job but, it is not recommended.