I am trying to only create a view component when the array has data. The array starts off empty - it is filled via API upon click of the item. Some items have data from this API endpoint and others do not have any values it returns as Object [[Prototype]]: Object No matter what conditional I do it does not work.

I am trying to only let this view be created if that endpoint has data for that array if it does not do not create the view.

this.state = {
      cryptoTradingSignals: [],
}
fetchCryptoStats(selectedCrypto) {
    getCryptoTradingSignals(selectedCrypto).then(cryptoTradingSignal =>
      this.setState({cryptoTradingSignals: cryptoTradingSignal}),
    );
  }
{this.state.cryptoTradingSignals.length !== 0 &&
    this.state.cryptoTradingSignals &&
    this.state.cryptoTradingSignals !== undefined &&
    this.state.cryptoTradingSignals !== null ? (
      <View
        style={{
          flex: 1,
          alignItems: 'center',
          paddingBottom: 30,
        }}>
        <Text style={styles.sectionHeader}>
          Market Signals
        </Text>
        <Box
          style={{margin: 5}}
          width="80%"
          bg="white"
          p="5"
          shadow={2}
          rounded="md"
          _text={{
            fontSize: 'md',
            fontWeight: 'bold',
            color: 'black',
          }}>
          <View style={{flexDirection: 'column'}}>
            <Text
              style={styles.marketSentimentTitle}>
              In The Money Signal
            </Text>
            <Text>
              Category:{' '}
              {this.state.cryptoTradingSignals
                .inOutVar.category
                ? 'not available'
                : null}
            </Text>
            <Text>
              Sentiment:{' '}
              {
                this.state.cryptoTradingSignals
                  .inOutVar.sentiment
              }
            </Text>
          </View>
        </Box>