Why I get this error ?

Error: Text strings must be rendered within a <Text> component.

Code:

        {
          filterCategory && onDeleteCategory && filterCategory.length > 0 && (
            <Pressable onPress={onPressOpenModalCategory} style={s.filterBtn}>
              <Text style={s.filterBtnText}>Kategorie</Text>
              <DeleteIcon onPress={onDeleteCategory} iconSize={14} />
            </Pressable>
          )
        }

if I remove these one condition:

filterCategory

then it works. but not like the above first code. What I am doing wrong ? I only make a condition.

€: Full Code

import { Pressable, StyleSheet, Text, View } from 'react-native'
import React from 'react'
import { globalStyles } from '../../shared/GlobalStyles'
import { DeleteIcon } from '../DeleteIcon'
import { IFilterTags } from './Model'

const FilterTags = ({
filterSize,
filterColor,
filterPrice,
filterCategory,
filterRating,
filterStatus,
onPressOpenModalSize,
onPressOpenModalColor,
onPressOpenModalPrice,
onPressOpenModalCategory,
onPressOpenModalRating,
onPressOpenModalStatus,
onDeleteSize,
onDeleteColor,
onDeletePrice,
onDeleteCategory,
onDeleteRating,
onDeleteStatus,
style
}: IFilterTags) => {
  const checkFilterCategory = () => filterCategory && onDeleteCategory && filterCategory.length > 0;
  return (
    <View style={[s.filterContainer, style]}>
        {
          filterSize && onDeleteSize && filterSize.length > 0 && (
            <Pressable onPress={onPressOpenModalSize} style={s.filterBtn}>
              <Text style={s.filterBtnText}>Größe</Text>
              <DeleteIcon onPress={onDeleteSize} iconSize={14} />
            </Pressable>
          )
        }
        {
         filterColor && onDeleteColor && filterColor.length > 0 && (
            <Pressable onPress={onPressOpenModalColor} style={s.filterBtn}>
              <Text style={s.filterBtnText}>Farbe</Text>
              <DeleteIcon onPress={onDeleteColor} iconSize={14} />
            </Pressable>
          )
        }
        {
          filterPrice && onDeletePrice && (filterPrice.from > 0 || filterPrice.to > 0) && (
            <Pressable onPress={onPressOpenModalPrice} style={s.filterBtn}>
              <Text style={s.filterBtnText}>Preis</Text>
              <DeleteIcon onPress={onDeletePrice} iconSize={14} />
            </Pressable>
          )
        }
        {
           onDeleteCategory && typeof filterCategory === 'string' && filterCategory.length > 0 && (
            <Pressable onPress={onPressOpenModalCategory} style={s.filterBtn}>
              <Text style={s.filterBtnText}>Kategorie</Text>
              <DeleteIcon onPress={onDeleteCategory} iconSize={14} />
            </Pressable>
          )
        }
        {
          filterRating && onDeleteRating && filterRating !== null && (
            <Pressable onPress={onPressOpenModalRating} style={s.filterBtn}>
              <Text style={s.filterBtnText}>Bewertungen</Text>
              <DeleteIcon onPress={onDeleteRating} iconSize={14} />
            </Pressable>
          )
        }
        {
         filterStatus && onDeleteStatus && filterStatus !== null && (
            <Pressable onPress={onPressOpenModalStatus} style={s.filterBtn}>
              <Text style={s.filterBtnText}>Zustand</Text>
              <DeleteIcon onPress={onDeleteStatus} iconSize={14} />
            </Pressable>
          )
        }
    </View>
  )
}

const s = StyleSheet.create({
  filterContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    flexWrap: 'wrap',
    marginTop: 12,
    paddingHorizontal: 8
  },
  filterBtn: {
    backgroundColor: '#fff',
    paddingVertical: 5,
    paddingHorizontal: 12,
    borderRadius: 8,
    borderWidth: 1,
    borderColor: '#e5e5e5',
    marginRight: 8,
  },
  filterBtnText: {
    fontFamily: globalStyles.font_medium,
    color: globalStyles.globalColor
  }
})

export default FilterTags

the output of of the filterCategorie is only a emtpy string.

I am very thankful for your help.........................................................................................................................................................

CodePudding user response：

There may be no errors in your code at all. React Native just "dont like" when we use more than one condition in conditional rendering.

You should wrap your conditions in circle brackets like this:

(filterCategory && onDeleteCategory && filterCategory.length > 0) &&

Btw, I suggest to use the optional chaining operator like so:

(onDeleteCategory && filterCategory?.length > 0) &&

CodePudding user response：

You have Text outside of a Text tag. I know it sounds like I'm not really helping, but believe me, this happens often in RN. You must have spaces somewhere. You should use some linting tool like ESLint.

But for now, just check spaces, try removing components until you found where is the issue and check character by character. There's something there, you are just not seeing it.