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

Question

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

I have successfully compiled and rendered your code. There is no mistake in the code that you have shared. Your code might be different from the one that you have shared here. — David Scholz
– David Scholz, Commented Aug 17, 2022 at 23:14

Evok · Accepted Answer · 2022-08-17 23:30:48Z

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) &&

answered Aug 17, 2022 at 23:30

Evok

1733 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

David Scholz Over a year ago

This is false. Using conditional rendering with multiple conditions without parentheses is perfectly fine.

Evok Over a year ago

@DavidScholz I suggest you to try conditional rendering with a condition like: someArray.length && - In my tests, there are 0% chance that this will work fine. Maybe problem is that React wants boolean and gets number

David Scholz Over a year ago

It makes no difference what conditions we are using. Parentheses are not enforced. Here is a snack to clear your doubts.

David Scholz Over a year ago

array.length is a so called falsy expression. If it returns 0 then it is considered falsy but it is not false (it is 0). The expression array.length > 0 is a valid boolean expression, it is false (not 0). Booleans and null values are ignored by react, while falsy values are not. this is documented here.

Evok Over a year ago

@DavidScholz Got it. I messed up falsy with always false. Thanks.

|

RamaProg · Accepted Answer · 2022-08-17 23:49:24Z

0

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.

answered Aug 17, 2022 at 23:49

RamaProg

1,3971 gold badge11 silver badges22 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

9 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related