Is it possible to filter the map array?

Question

React Native

I have the following code with books:

import React from "react";
import { StyleSheet, View, Text } from "react-native";
import {
  Card,
  CardTitle,
  CardContent,
  CardAction,
  CardButton,
  CardImage,
} from "react-native-material-cards";

function Home() {

  return (
    <View>
      {books.map((book, index) => (
        <Card>
          <CardImage source={book.image} />
          <CardTitle title={book.title} subtitle={book.subtitle} />
          <CardContent text={book.text} />
          <CardAction separator={true} inColumn={false}>
            <CardButton onPress={() => {}} title="Читать" color="blue" />
            <CardButton
              onPress={() => {}}
              title="Добавить в избранное"
              color="blue"
            />
          </CardAction>
        </Card>
      ))}
    </View>
  );
}

export default Home;

let books = [
  {
    id: 0,
    image: { uri: "https://osipenkov.ru/wp-content/uploads/2018/01/book.jpg" },
    title:
      "Google Analytics для googлят. Практическое руководство по веб-аналитике",
    subtitle: "Я. Осипенков",
    text: "Описание книги",
    favourite: false,
    genres: "Adv"
  },
  {
    id: 1,
    image: { uri: "https://media2.24aul.ru/imgs/5b71858b6241400001fef2a5/" },
    title: "Яндекс.Директ. Как получать прибыль, а не играть в лотерею",
    subtitle: "Ф. Царевский",
    text: "Описание книги",
    favourite: true,
    genres: "Adv"
  },
  {
    id: 2,
    image: {
      uri:
        "https://img.kuplao.ru/etc/media/489x325/product/1/016/1/01125676/1.jpg",
    },
    title: "HTML5 + CSS3. Основы современного WEB-дизайна",
    subtitle: "А. Хрусталев, А. Кириченко",
    text: "Описание книги",
    favourite: false,
    genres: "Dev"
  },
  {
    id: 3,
    image: {
      uri:
        "https://fleuren.me/image/cache/catalog/Books/5781751-1-1200x800.jpg",
    },
    title: "Изучаем программирование на JavaScript",
    subtitle: "Фримен Э., Робсон Э.",
    text: "Описание книги",
    favourite: true,
    genres: "Dev"
  },
  {
    id: 4,
    image: {
      uri:
        "https://teletype.in/files/8a/8a131c0d-a1da-4ad6-a66f-73f8996838ce.png",
    },
    title: "Заряженные на результат",
    subtitle: "Нил Доши и Линдси Макгрегор",
    text: "Описание книги",
    favourite: false,
    genres: "Manage"
  },
  {
    id: 5,
    image: {
      uri:
        "https://www.soyuz.ru/public/uploads/files/37/6981046/600x400_20170326080036fba0a72eff.jpg",
    },
    title: "Человек решающий",
    subtitle: "Деннис Бакке",
    text: "Описание книги",
    favourite: true,
    genres: "Manage"
  },
  {
    id: 6,
    image: {
      uri:
        "https://seonomad.net/sites/default/files/book-image/seo_rukovodstvo_po_vnutrennim_faktoram_0.jpg",
    },
    title: "Руководство по внутренним факторам",
    subtitle: "Гроховский Л.",
    text: "Описание книги",
    favourite: false,
    genres: "Seo"
  },
  {
    id: 7,
    image: {
      uri:
"https://cv4.litres.ru/pub/c/elektronnaya-kniga/cover_max1500/6492941-i-o-sevostyanov-prodvizhenie-portalov-i-internet-magazinov.jpg",
    },
    title: "Продвижение порталов и интернет-магазинов",
    subtitle: "Гроховский Л.",
    text: "Описание книги",
    favourite: true,
    genres: "Seo"
  },
];

Works well, but the question is, is it possible to set rendering conditions for the map method (for example, display only those books where genres: "Dev" is specified)? Or will it be necessary to filter the already received array from map? And if you filter, then in which direction to look? I'm only familiar with react native, so I apologize if the question is very stupid.

Answer 1

Either filter books before map
books.filter(...).map(...)
or print null instead of elements if you don't want to show the book:

{books.map((book, index) => (IsHidden(book) ? null : <Card>