Map Method Returns Undefined When Using in React App

Question

I'm trying to use the map function in my React App and getting undefined. Returning the actual array (of objects) works, but when running map function, it returns undefined. Things work ok outside of React so I'm assuming it's syntax:

const Filter = ({ list }) => {

    const filterHandler = () => {
      const newList = list.map(item => {
        item.id;
      });
      console.log(list); //this successfully logs products array
      console.log(newList); //this logs undefined
    };

    return (

        <div>
          <button onClick={filterHandler}>Filter</button>
        </div>

    )
}

export default Filter;

You probably shouldn't update your question to be correct. I think that would be confusing to future readers to see the question with an example that isn't broken. — Brian Thompson, Mar 03 '20 at 16:45
This has nothing to do with React, it is a JS question only. Please read https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map — Chris Tapay, Mar 03 '20 at 17:09

Mamun · Accepted Answer · 2020-03-03T16:46:38.010

1

You have to specify the return keyword:

const newList = list.map(item => {
   return item.id;
});

OR: In single line without using {}

const newList = list.map(item => item.id);

edited Mar 03 '20 at 16:46

answered Mar 03 '20 at 16:40

Mamun

66,969
9
47
59

ah geez, rookie mistake – Eric Nguyen Mar 03 '20 at 16:43
@EricNguyen, how *list* looks like? – Mamun Mar 03 '20 at 16:43

Map Method Returns Undefined When Using in React App

1 Answers1