Skip to content Skip to sidebar Skip to footer

React | Items.map Is Not A Function

I am using Downshift, in order to create a dropdown that displays some menu options. I created a reusable React component with downshift, but now I get this error: Uncaught TypeErr

Solution 1:

.map doesn't exist from an object {}, it only exists from an array []. You can:

  • Change your object to an array
  • Use Object.keys(items).map(...)
  • Use lodash.map

Solution 2:

Try to put Object.keys(objectname) before you array map.

Map function needs an array to work, with Object.keys(objectname), you will transform an object {} to an a valid array [] for map.

Object.keys(items).map(item => ...

Solution 3:

Youre iteration on object this should be array Just change

items= {
  editUser: {
    name:'Edit Info',
    icon:'pencil-square-o'
  },
  changePassword: {
    name:'Change Password',
    icon:'lock'
  },
  deleteUsed: {
    name:'Delete user',
    icon:'trash-o'
  }
};

TO

items = [{
    name: 'Edit Info',
    icon: 'pencil-square-o'
  },{
    name: 'Change Password',
    icon: 'lock'
  },{
    name: 'Delete user',
    icon: 'trash-o'
  }
];

Or you can use items.enteries.map to iterate over object

Solution 4:

items is not an array. Check post on how to map through object here

An other solution would be to declare items as an array:

items = [
  {
    name: 'Edit Info',
    icon: 'pencil-square-o'
  },
  {
    name: 'Change Password',
    icon: 'lock'
  },
  {
    name: 'Delete user',
    icon: 'trash-o'
  }
];

Post a Comment for "React | Items.map Is Not A Function"