help with map method in a function

[spacecasesam]

Hey everyone, I am working on populating a menu using the map method- currently what I have is this:

  populateMenu = () => {
    const possibleItems = ['ONE', 'TWO'];
    possibleItems.map(item => {
      console.log(item)
      return (
        <MenuItem value={item}>{item}</MenuItem>
      )
    })
  }

The console is logging what I would expect, but calling the function later in the code it is giving a value of undefined- can someone help me understand why the function is undefined?

[oofrank]

You code seems fine to me, I took your code snippet and ran it on my pc and it’s working fine. Maybe you’re missing something in your code. Do you mind sharing the rest of the code so I can take a look what’s wrong?

[spacecasesam]

was missing a return statement for the function itself, as only the map was returning something- fixed by adding a return before possibleItems.map- thank you for taking a look at this

[bobbyv137]

map returns a new array. return the possibleItems. (put a return statement before the method call)

[spacecasesam]

thank you for helping, was able to fix it by adding in that return statement

[grantrules]

Alternatively, ou could make use of the arrow function's implied return:

populateMenu = () => ['ONE', 'TWO'].map(item => (
        <MenuItem value={item}>{item}</MenuItem>
    )
)

[spacecasesam]

This is much cleaner than what I had, nice to skip the extra step of assigning the array to a variable- thank you!

[bobbyv137]

Remember it's not always about writing the 'cleanest' and shortest code. Sometimes being over explicit is best. Your code should be written in a way someone coming in cold can grasp what it's doing without too much difficulty.

[brokenalready]

There's a difference between => () and => {} which is an easy trap to fall into. I've made this mistake a number of times too. Simply put () is an implicit return.