CODEWITHSUNDEEP
androidreact-native
Zuet
Zuet

Reputation: 593

Text strings must be rendered within Text React Native

I have a problem with my <SearchBar> and I really don't know where the error is.

This is my SearchBar

SearchBar({onChange, value, onDelete}) {
  return (
    <View style={styles.container}>
      <View style={styles.searchBar}>
        <AntDesign name="search1" size={20} />
        <TextInput onChangeText={onChange} value={value} />
      </View>
      /* wrong */ {value && <AntDesign name="closecircle" size={20} onPress={onDelete} />}
      /* fix*/ {!!value && <AntDesign name="closecircle" size={20} onPress={onDelete} />}
    </View>
  );
}

I call it in Parent

const onSearch = value => {
  setTextSearch(value);

  let filtered = people.filter(function (person) {
    return removeVietnameseTones(person.fullName)
      .toLowerCase()
      .includes(removeVietnameseTones(value).toLowerCase());
  });

  setFilteredPeople(filtered);
};

<SearchBar
  onChange={value => onSearch(value)}
  onDelete={() => {
    setTextSearch();
    setFilteredPeople(people);
  }}
  value={textSearch}
/>

Everything is working, but when I delete the last letter of textSearch, my App will have string bug. They say that:

Error: Text strings must be rendered within a component

That's all.

Tks you.

Upvotes: 0

Views: 158

Answers (1)

beingbalveer
beingbalveer

Reputation: 72

This line is causing the problem

  value && <AntDesign name="closecircle" size={20} onPress={onDelete} />

So when value is empty string then react native consider it as a false value and not render next statement, but same time it return value

So react native try to render value (means '' or empty string) and string must be rendered inside Text block

Convert your value to boolean as

!!value && <AntDesign name="closecircle" size={20} onPress={onDelete} />

or

Boolean(value) && <AntDesign name="closecircle" size={20} onPress={onDelete} />

Upvotes: 1

Related Questions