Реагируйте на собственные карты фильтрации .filter, не отображая каждый элемент массива onchange

Question

У меня есть компонент карты, который будет отфильтрован в соответствии с пользовательским вводом. Я делаю так, чтобы при изменении ввода текста ничто не помогало отображать только разделы рейтинга внутри карты. Почему я не уверен, также выполняю ли я рендеринг?прямо в homescreen.js у меня внутри homescreen.js есть три условия if, можно ли уменьшить код или избавиться от него ...?это было бы хорошо ..!

homeScreen.js

import axios from 'axios';
import React from 'react';
import {
  ActivityIndicator,
  ScrollView,
  Text,
  View,
  TouchableOpacity,
  TextInput,
} from 'react-native';
import Card from '../Components/Card/card';
export default class HomeScreen extends React.Component {
  state = {
    shows: [],
    isLoading: true,
    search: false,
    title: 0,
    titleSaved: false,
  };

  componentDidMount() {
    this.getData();
  }
  toggleSearch = () => {
    this.setState({
      search: true,
    });
  };
  setSearchedTitle = searchedTitle => {
    console.log('inside search title', searchedTitle);
    this.state.shows.filter((currentValue, index) => {
      if (searchedTitle === this.state.shows[index].data.name) {
        this.setState({title: this.state.shows[index].data});
        console.log('after setting state', this.state.title);
        this.setState({titleSaved: true});
      }
    });
  };

  getData = () => {
    const requestUrls = Array.from({length: 9}).map(
      (_, idx) => `http://api.tvmaze.com/shows/${idx + 1}`,
    );

    const handleResponse = data => {
      this.setState({
        isLoading: false,
        shows: data,
      });
    };
    const handleError = error => {
      console.log(error);
      this.setState({
        isLoading: false,
      });
    };

    Promise.all(requestUrls.map(url => axios.get(url)))
      .then(handleResponse)
      .catch(handleError);
  };

  render() {
    const {isLoading, shows, search, title} = this.state;
    if (isLoading) {
      return <ActivityIndicator size="large" color="#0000ff" />;
    } else if (!search) {
      return (
        <View>
          <View>
            <TouchableOpacity
              onPress={this.toggleSearch}
              style={{height: 300, width: 300}}>
              <Text style={{textAlign: 'center', fontSize: 40}}>
                Press to Search
              </Text>
            </TouchableOpacity>
          </View>
          <ScrollView style={{backgroundColor: '#E1E8E7'}}>
            {shows.length &&
              shows.map((show, index) => {
                return (
                  <Card
                    key={show.data.id}
                    title={show.data.name}
                    rating={show.data.rating.average}
                    source={show.data.image.medium}
                    genres={show.data.genres}
                    language={show.data.language}
                    network={show.data.network}
                    schedule={show.data.schedule}
                    summary={show.data.summary}
                    navigation={this.props.navigation}
                  />
                );
              })}
          </ScrollView>
        </View>
      );
    } else if (search) {
      return (
        <View>
          <View style={{flex: 2}}>
            <TextInput
              style={{
                height: 100,
                width: 100,
                borderColor: 'gray',
                borderWidth: 1,
              }}
              onChangeText={searchedTitle => {
                this.setSearchedTitle(searchedTitle);
              }}
            />
            {console.log(this.state.title.name, 'hello title')}

            <Text>Hello</Text>
          </View>
          <View style={{flex: 20}}>
            {console.log(this.state.title.rating.average)}
            {console.log(this.state.title.image.medium)}

            {this.state.titleSaved ? (
              <Card
                title={this.state.title.name}
                rating={this.state.title.rating.average}
                source={this.state.title.image.medium}
                genres={this.state.title.genres}
                language={this.state.title.language}
                network={this.state.title.network}
                schedule={this.state.title.schedule}
                summary={this.state.title.summary}
                navigation={this.props.navigation}
              />
            ) : (
              <View>
                <Text>Not found</Text>
              </View>
            )}
          </View>
        </View>
      );
    }
  }
}

Card.js

import React from 'react';
import {Image, View, Text, StyleSheet, TouchableOpacity} from 'react-native';
import {
  widthPercentageToDP as wp,
  heightPercentageToDP as hp,
} from 'react-native-responsive-screen';
import Icon from 'react-native-vector-icons/FontAwesome';

const Card = props => {
  return (
    <View style={styles.container}>
      <Image style={styles.Image} source={{uri: `${props.source}`}} />
      <Text style={styles.title}>{props.title}</Text>
      <View style={styles.ratingContainer}>
        <Text style={styles.rating}>Rating: {props.rating}</Text>
        <Icon name="star" size={30} color="grey" />
      </View>
      <TouchableOpacity
        style={styles.button}
        onPress={() => {
          props.navigation.navigate('Details', {
            title: props.title,
            rating: props.rating,
            source: props.source,
            genres: props.genres,
            language: props.language,
            network: props.network,
            schedule: props.schedule,
            summary: props.summary,
          });
        }}>
        <Text style={styles.buttonText}>Press for details </Text>
      </TouchableOpacity>
    </View>
  );
};

export default Card;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
  },
  Image: {
    flex: -1,
    width: wp('90%'),
    height: hp('65%'),
  },
  title: {
    flex: 1,
    fontSize: 40,
    borderRadius: 10,
    color: '#3C948B',
    margin: 15,
    justifyContent: 'center',
    alignItems: 'center',
  },
  ratingContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: 'white',
    elevation: 6,
    justifyContent: 'space-between',
    borderWidth: 1,
    width: 300,
  },
  rating: {
    fontSize: 25,
    paddingLeft: 15,
  },
  button: {
    flex: 1,
    color: '#3C948B',
    backgroundColor: '#3C948B',
    height: hp('7%'),
    width: wp('70%'),
    margin: 20,
    alignItems: 'center',
    borderBottomLeftRadius: 10,
    borderTopRightRadius: 10,
  },
  buttonText: {
    flex: 1,
    fontSize: 25,
  },
});