CODEWITHSUNDEEP
javascriptreactjs
3noki
3noki

Reputation: 387

React map function works, but when API called it breaks

Working on a React bookshelf project, and currently working on the search feature, the app lists the books fine, but when I search the code below breaks, why is this saying it is undefined when I try to search?

Project / code listed here

TypeError: Cannot read property 'map' of undefined
Books.render
src/utils/Books.js:15

  14 |   <ol className="books-grid">
> 15 |         {this.props.books.map((book) => (
  16 |           <li key={book.id}>
  17 |           <div className='book'>
  18 |             <div className='book-top'>

Upvotes: 0

Views: 54

Answers (1)

Bradey Whitlock
Bradey Whitlock

Reputation: 201

This seems like books is undefined. You could console it out to make sure it's not. You can also put a check before the map like this

<ol className="books-grid">
    {this.props.books && this.props.books.map((book) => (
     <li key={book.id}>
     <div className='book'>
      <div className='book-top'>

Upvotes: 4

Related Questions