Uncaught TypeError: Cannot read property ‘map’ of undefined in reactjs application

First you need to be sure that you are passing correct values as props of this component. In your case items is undefined at thus the result is an error. In order to be resilient to this types of errors you can have a condition like this:

return (
  <ul className="list-group">
    {items && items.length
      ? items.map((item) => (
          <li
            onClick={() => onItemSelect(item)}
            key={item.id}
            className={item === currentGenre ? 'list-group-item active' : 'list-group-item'}
          >
            {item.name}
          </li>
        ))
      : null}
  </ul>
);

Instead of null you return any component as you see fit.

CLICK HERE to find out more related problems solutions.

Leave a Comment

Your email address will not be published.

Scroll to Top