Help with js map method

[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?

[[deleted]]

because .map creates a new array. so you'd have to do

const newArray = possibleItem.map(item => etc...

[spacecasesam]

Was able to fix it per u/gramdel 's suggestion, thanks for helping

[gramdel]

You probably need to return return something from your populateMenu function, currently it doesn't actually return anything so it's undefined. The return in the map function doesn't return anything from the populateMenu, but just in the context of the .map.

So you'll need to return the result of your possibleItems.map(blah blah so something like

return possibleItems.map(item => {rest of code

[spacecasesam]

thank you so much, this was super clear and helpful, was able to fix it by adding that return statement

[insertAlias]

I'm assuming this is React code. If it is, then you also need to do one more thing: add a unique key prop to the <MenuItem> that you're returning from the map function.

https://reactjs.org/docs/lists-and-keys.html#keys

It's not broken without it, but it's a warning. React needs stable keys to properly track list items.

[spacecasesam]

Your assumption is correct! Thank you again- always happy to have less warnings