skip to Main Content

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………………………………………………………………………………………………………………………………………

2

Answers


  1. 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) &&
    
    Login or Signup to reply.
  2. 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.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search