Breaking News: Grepper is joining You.com. Read the official announcement!

react native text strings must be rendered within text find error

Add Answer

florinrelea answered on March 8, 2021 Popularity 10/10 Helpfulness 5/10

answer react native text strings must be rendered within text find error

related error: text strings must be rendered within a <text> component.

related react native text strings must be rendered within a text

related Text strings must be rendered within a <Text> component

react native text strings must be rendered within text find error

Comment

I've shot myself in the foot too many times over this, so I'm leaving this
here for the next person not to...

Whenever you see
```
Invariant Violation: Text strings must be rendered within a <Text> component
99% of cases will be caused by using conditional rendering with only && 
instead of ternary ? : statements. Why? Because when your condition
resolves to undefined, there are no components there, as opposed to 
null or an empty array which would have safely showed an empty space 
and save your life from the red screen of hell.
```

Change ALL OF YOUR LOGICAL CONDITIONAL RENDERS into ternary renditions.

ie:

DON'T DO
`widgetNumber === 10 && <MyComponent />`
  
DO DO
`widgetNumber === 10 ? <MyComponent /> : null`

Popularity 10/10 Helpfulness 5/10 Language javascript

Source: Grepper

Tags: find javascript react-native text

Link to this answer
Share Copy Link

Contributed on Sep 14 2022

florinrelea

0 Answers Avg Quality 2/10

Closely Related Answers

error: text strings must be rendered within a <text> component.

Comment

THIS SITE [[ACTUALLY]] SUCKS!!!!! https://rapha1004.me/

Popularity 7/10 Helpfulness 2/10 Language whatever

Source: Grepper

Tags: text whatever

Link to this answer
Share Copy Link

Contributed on Mar 17 2024

Cloudy Caterpillar

0 Answers Avg Quality 2/10

react native text strings must be rendered within a text

Comments(1)

For me the following code works fine, as long as this.state.error === undefined or it is not an empty string.

render() {
  return (
    <View>
      {this.state.error &&

        <Text>
          Error message: {this.state.error}
        </Text>
      }
    </View>
  );
}
If the error state is changed to empty string '', you will have the aforementioned exception: Invariant Violation: Text strings must be rendered within a <Text> component

The reason of that is, when this.state.error === '', the following expression will be evaluated as empty string, i.e., '', and this will cause Invariant Violation: Text strings must be rendered within a <Text> component

{this.state.error &&

  <Text>
    Error message: {this.state.error}
  </Text>
}
When this.state.error === undefined, the expression will be evaluated as undefined, which is what we expect, and it's fine.

Popularity 10/10 Helpfulness 2/10 Language javascript

Source: Grepper

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Mar 08 2021

Santino

0 Answers Avg Quality 2/10

Text strings must be rendered within a <Text> component

Comment

{!!error && <Text>{error}</Text>}

Popularity 5/10 Helpfulness 1/10 Language javascript

Source: stackoverflow.com

Tags: javascript text

Link to this answer
Share Copy Link

Contributed on Aug 01 2024

barisx

0 Answers Avg Quality 2/10

react native text strings must be rendered within text find error

Contents

More Related Answers

react native text strings must be rendered within text find error

Closely Related Answers

error: text strings must be rendered within a <text> component.

react native text strings must be rendered within a text

Text strings must be rendered within a <Text> component

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.