Как предать данные в вызываемый компонент перед отрисовкой?

Question

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

Имеется такая структура: Файл Books.js и экраны Popular.js, Favourite.js и другие. В файле Books.js хранится следующее:

import React, { Component } from "react";
import { View, Text, Modal } from "react-native";
import {
  Card,
  CardTitle,
  CardContent,
  CardAction,
  CardButton,
  CardImage,
} from "react-native-material-cards";
import Popular from '../screens/Popular'

class Book extends React.Component {
  render() {
    return (
      <View>
        {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>
          ))}
      </View>
    );
  }
}

export default Book;

let books = [
  {
    id: 0,
    image: { uri: "https://osipenkov.ru/wp-content/uploads/2018/01/book.jpg" },
    title:
      "Google Analytics для googлят. Практическое руководство по веб-аналитике",
    subtitle: "Я. Осипенков",
    text: "Описание книги",
    favourite: true,
    genres: "Adv",
    popular: false,
  },
  {
    id: 1,
    image: { uri: "https://media2.24aul.ru/imgs/5b71858b6241400001fef2a5/" },
    title: "Яндекс.Директ. Как получать прибыль, а не играть в лотерею",
    subtitle: "Ф. Царевский",
    text: "Описание книги",
    favourite: false,
    genres: "Adv",
    popular: true,
  },
  {
    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: true,
    genres: "Dev",
    popular: false,
  },
  {
    id: 3,
    image: {
      uri:
        "https://fleuren.me/image/cache/catalog/Books/5781751-1-1200x800.jpg",
    },
    title: "Изучаем программирование на JavaScript",
    subtitle: "Фримен Э., Робсон Э.",
    text: "Описание книги",
    favourite: false,
    genres: "Dev",
    popular: true,
  },
  {
    id: 4,
    image: {
      uri:
        "https://teletype.in/files/8a/8a131c0d-a1da-4ad6-a66f-73f8996838ce.png",
    },
    title: "Заряженные на результат",
    subtitle: "Нил Доши и Линдси Макгрегор",
    text: "Описание книги",
    favourite: true,
    genres: "Manage",
    popular: false,
  },
  {
    id: 5,
    image: {
      uri:
        "https://www.soyuz.ru/public/uploads/files/37/6981046/600x400_20170326080036fba0a72eff.jpg",
    },
    title: "Человек решающий",
    subtitle: "Деннис Бакке",
    text: "Описание книги",
    favourite: false,
    genres: "Manage",
    popular: true,
  },
  {
    id: 6,
    image: {
      uri:
        "https://seonomad.net/sites/default/files/book-image/seo_rukovodstvo_po_vnutrennim_faktoram_0.jpg",
    },
    title: "Руководство по внутренним факторам",
    subtitle: "Гроховский Л.",
    text: "Описание книги",
    favourite: true,
    genres: "Seo",
    popular: false,
  },
  {
    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: false,
    genres: "Seo",
    popular: true,
  },
];

И экран, к примеру, Popular.js:

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

Собственно вопрос: в файле Books.js у меня вот тут происходит фильтрация книг по одному из полей объекта:

{books.filter((item) => { return item.popular == true; }).map((book, index) => (...)

В данном случае по полю popular. Вопрос в том, как мне перенести указание поля, по которому буду фильтровать рендер содержимого в, непосредственно, экран, где будет вызван компонент Book?

Возможно ли что то подобное? Понимаю, что данный код не отработает, просто пытаюсь передать идею.. Только начинаю вникать в react native, поэтому сильно тапками не кидайтесь, пожалуйста)

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

Answer 1

[davidnum95]

<Books type="popular"/>

{books.filter((item) => { return item[this.props.type]; }).map((book, index) => (...)

Comments

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

Ругается..

Cannot read property 'type' of undefined
TypeError: Cannot read property 'type' of undefined