react native text string must be render code example
Example: react native text strings must be rendered within a text
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.