Skip over item or row in React Native FlatList

SkipRowInFlatListDemo.js

import React from 'react';
import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Text,
  StatusBar,
  FlatList,
} from 'react-native';

// SEE BLOG POST FOR EXPLANATION REGARDING HOW TO SKIP 
// OVER CERTAIN ITEMS AND ROWS IN A REACT NATIVE FLAT LIST
// https://topherpedersen.blog/2020/05/16/how-to-skip-filter-and-remove-items-and-rows-when-rendering-a-flatlist-in-react-native/

class FlatListItem extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    if (this.props.text !== "bar") {
      return(
        <View>
          <Text>{this.props.text}</Text>
        </View>
      );
    } else {
      return(
        <></>
      );
    }
  }
}

const Empty = <></>;

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      items: [
        {text: "foo"},
        {text: "bar"},
        {text: "baz"},
      ],
    }
  }

  render() {
    return(
      <SafeAreaView style={{flex: 1}}>

        <View style={{flex: 15}}>
          <Text style={{textAlign: 'center'}}>FlatListApp</Text>
        </View>
        
        <View style={{flex: 85, justifyContent: 'center', backgroundColor: 'white'}}>
          <FlatList
            key="flat-list-key"
            data={this.state.items}
            renderItem={({ item }) => (
              <FlatListItem text={item.text} />
            )}
            keyExtractor={ (item, index) => index.toString() }/>
        </View>

      </SafeAreaView>
    );
  }
}

export default App;