0

I don't understand, are you required to return a specific way through map?

componentDidMount() {
  // read the items db
  let categories = [];
  items.map(cat => {
    if (categories.indexOf(cat.category) === -1) {
      categories.push(cat.category);
    }
  });
  console.log(categories);
  this.setState({ categories: categories });
}
2
  • 1
    you are no returnig at all, and yes in map you normally return unless you want to have undefined values, items.map(cat => (categories.indexOf(cat.category) === -1) ? categories.push(cat.category) : undefined , what makes not much sense, a forEach is more appropiate for side effects, as in this case Commented Mar 18, 2020 at 1:36
  • From afar it looks like all you're trying to do is set state categories to items without duplicates. Which can be written as this.setState({ categories: items.filter((el, i, arr) => arr.indexOf(el) === i) }); Commented Mar 18, 2020 at 2:16

3 Answers 3

2

The purpose of .map is to produce a new array from an old one. The return value from your function specifies what the new value at that spot in the array should be. Since you're not returning anything an array of undefined's will be produced. This is probably a mistake, and therefore that lint rule is warning you about it.

In your case, you don't seem to care about the array that map produces at all, so the fix is to use a more appropriate method, such as .forEach

let categories = [];
items.forEach(cat => {
  if (categories.indexOf(cat.category) === -1) {
    categories.push(cat.category);
  }
});

From the documentation on array-callback-return:

Array has several methods for filtering, mapping, and folding. If we forget to write return statement in a callback of those, it's probably a mistake. If you don't want to use a return or don't need the returned results, consider using .forEach instead.

Sign up to request clarification or add additional context in comments.

Comments

0

try to use iterator as for or forEach map don't work the purpose from the map it returns a new array from want to render it may be undefined or In your case, you don't seem to care about the array that map produces at all, so the fix is to use a more appropriate method, such as .forEach or for

let categories = [];
const items = [];
for (let cat in items) {
     if (categories.indexOf(cat.category) === -1) {
          categories.push(cat.category);

     }
};
console.log(categories);

Comments

-1

Yes, it requires you to return something to create the new array. If you just want to iterate items and push some values to categories array, you can use forEach or for...of.

this.setState({
    categories: items.filter(cat => categories.indexOf(cat.category) === -1).map(cat => cat.category)
})

Use filter to remove cat with category already in categories, and use map to create a new categories array.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.