Возможна ли фильтрация массива map?

Question

[Илья Подлесный]

Имеется следующий код с книгами:

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"
  },
];

Отрабатывает хорошо, но вопрос в следующем, возможно ли задавать условия рендеринга для метода map (к примеру, отобразить только те книги, где указан genres: "Dev")? Или надо будет фильтровать уже полученный массив от map? И если фильтровать, то в какую сторону смотреть? С react native знакомлюсь только, поэтому прошу прощения, если вопрос очень глупый.

Answer 1

[Robur]

Либо фильтруете books перед map
books.filter(...).map(...)

или выводите null вместо элементов если книгу показывать не надо:

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

Comments

[Илья Подлесный]

Большое спасибо!

[Илья Подлесный]

А не подскажете еще один момент, я сделал фильтрацию подобным способом и все хорошо отработало

{books.filter((item) =>{ return item.popular == true }).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>
        ))}

Данный код у меня находится в фале books.js
У меня есть несколько экранов Избранное, Популярное и Жанры (с категориями), в каждом из них я вызываю books вот таким способом:

import React from 'react'
import { StyleSheet, View, Text } from 'react-native'
import Books from '../components/Books'


function Home() {
  return (
    <View style={styles.container}>
      <Books />
    </View>
  );
}



const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#ebebeb'
  }
})

export default Home

Собственно вопрос - могу ли я проводить подобную сортировку при вызове функции Book на разных экранах для отображения разных книг? И если да, то подтолкните, пожалуйста, куда смотреть..

[Robur]

Илья Подлесный, передавайте какое-нибудь значение через пропсы, а там меняйте логику в зависимости от этого значения

<Books type={'popular'} />

books.filter(book => props.type === 'popular' ? book.popular : true)

[Илья Подлесный]

Robur, огромное спасибо! Выручили очень сильно)