filter vs map reactjs and jsx

Question

I\'m working on a react project to learn react.

In a component\'s render method, when I use .map to iterate over values and return an array of component

Answer 1

Array.filter does not allow you to transform the data into components. That is the job of Array.map.

You should instead filter first, then chain the map call afterward:

{              
  books && books
    .filter(book => book.shelf === shelf)
    .map((book, index) => {
      return (
        
      );
    })
}

If you want to avoid a second pass over your list of books, you can return null as well, though this is "less good" because you're forcing React to render null when it doesn't need to do any work at all:

{              
  books && books
    .map((book, index) => {
      if (book.shelf !== shelf) {
        return null;
      }
      return (
        
      );
    })
}