Logically rendering Components

if(!this.state.filterVideos || this.state.filterVideos === 'all') {
      return (
        <View>
          <ScrollView>
            <View style={ styles.container }>
              <InfoBar 
                message="Please note, your CPD record can take up to 24 hours to update"
              />
              <TabBar 
                filterVideos={ this.filterVideos }
                setActive="all" />
              {
                this.state.videos
                  .map(video => 
                    <PlaylistItem 
                      style={ { flex: 1 } } 
                      key={ video.id } 
                      video={ video }
                      updateStatement={ this.updateStatement }
                    />
                  )
              }
            </View>
          </ScrollView>
        </View>
      )
    } else if (this.state.filterVideos === 'structured') {
      return (
        <View>
          <ScrollView>
            <View style={ styles.container }>
              <InfoBar 
                message="Please note, your CPD record can take up to 24 hours to update"
              />
              <TabBar 
                filterVideos={ this.filterVideos }
                setActive="structured" />
              {
                this.state.structuredVideos
                  .map(video => 
                    <PlaylistItem 
                      style={ { flex: 1 } } 
                      key={ video.id } 
                      video={ video }
                      updateStatement={ this.updateStatement }
                    />
                  )
              }
            </View>
          </ScrollView>
        </View>
      )
    } else if(this.state.filterVideos === 'unstructured') {
      return (
        <View>
          <ScrollView>
            <View style={ styles.container }>
              <InfoBar 
                message="Please note, your CPD record can take up to 24 hours to update"
              />
              <TabBar 
                filterVideos={ this.filterVideos }
                setActive="unstructured" />
              {
                this.state.unstructuredVideos
                  .map(video => 
                    <PlaylistItem 
                      style={ { flex: 1 } } 
                      key={ video.id } 
                      video={ video }
                      updateStatement={ this.updateStatement }
                    />
                  )
              }
            </View>
          </ScrollView>
        </View>
      )
    }
  }