Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

"Text strings must be rendered within a Text component" when && operator is used in JSX #20764

Closed
mattermoran opened this issue Aug 21, 2018 · 24 comments
Labels
Bug DX Issues concerning how the developer experience can be improved. 📮Known Issues This indicates an issue that refers to a bug or limitation of RN that is not currently being handled Platform: Android Android applications. Platform: iOS iOS applications. Stale There has been a lack of activity on this issue and it may be closed soon.

Comments

@mattermoran
Copy link

mattermoran commented Aug 21, 2018

@hramos here. This issue has been modified from its original content, in order to convey the latest status of this issue. You may refer to the edit history to see what @mattermoran originally reported.

Environment:

[skip envinfo]

This issue only affected Android in older releases, but is now consistent across both iOS and Android platforms as of 0.57.8.

Description

Using JSX that conditionally renders a Text element can lead to a RedBox error, "Invariant Violation: Text strings must be rendered within a Text component", if the condition is "falsy", as in the following example:

<View>
  {someTextValue && <Text>{someTextValue}</Text>}
</View>

This can lead to a confusing development experience, as the pattern is documented in React's JSX docs.

Workaround

Use a ternary operator.

<View>
  {someTextValue ? <Text>{someTextValue}</Text> : null}
</View>
@react-native-bot react-native-bot added the Platform: Android Android applications. label Aug 21, 2018
@react-native-bot

This comment has been minimized.

@mattermoran

This comment has been minimized.

@ATShiTou

This comment has been minimized.

@mattermoran

This comment has been minimized.

@ATShiTou

This comment has been minimized.

@ATShiTou

This comment has been minimized.

@mattermoran

This comment has been minimized.

@ATShiTou

This comment has been minimized.

@mattermoran
Copy link
Author

mattermoran commented Aug 21, 2018

@ATShiTou Here's the screenshot of what works on ios but crashes the app on android
image
The ternary operator like this works fine on both platform
image

@ATShiTou

This comment has been minimized.

@mattermoran
Copy link
Author

mattermoran commented Aug 21, 2018

@ATShiTou btw interesting thing that I noticed. Let's say I have the state nickname: null and when I fetch data and the state becomes nickname: 'alex' then app will crash. I did more tests and apparently it doesn't work with strings on android but other types like null, undefined or an object are fine. iOS handles that without a problem though. I can check logs now

UPDATE:
so actually it crashes ONLY with empty string like nickname: ''

@mattermoran mattermoran changed the title APP crushes on android when "&&" used in JSX APP crashes on android when "&&" used in JSX Aug 21, 2018
@ravirajn22
Copy link

ravirajn22 commented Aug 21, 2018

I know whats going wrong,

The below code works without crashing in iOS whereas it crashes in Android.
I checked it snack.expo v29.0.0.

<View style={styles.container}>
        {'' && <Text style={styles.paragraph}>I am here</Text>}
</View>

Leaving aside the crash, you should not render a empty string without wrapping it in Text for now in React-Native.
In these case you must do,

<View style={styles.container}>
        // Change any variable to boolean using double exclamation !!
        {!!'' && <Text style={styles.paragraph}>I am here</Text>}
</View>

By the way still this is a bug in RN, to maintain compatability either it should crash in both iOS and Android or it should emit omit empty string('') altogether.

@mattermoran
Copy link
Author

@ravirajn22 yes that's right. Thanks for clearing things up

@hramos hramos added the Resolution: For Stack Overflow A question for Stack Overflow. Applying this label will cause issue to be closed. label Aug 23, 2018
@hramos
Copy link
Contributor

hramos commented Aug 23, 2018

Using the ternary operator is the right approach here.

@hramos hramos closed this as completed Aug 23, 2018
@jdiaz5513
Copy link

Why was this bug closed? My team just got bit by this (surprising!) behavior today.

At the bare minimum if this is desired behavior (I cannot imagine how it could be), make it consistent across platforms and document it.

@hramos
Copy link
Contributor

hramos commented Dec 13, 2018

@jdiaz5513 it was closed as a workaround was provided. I think it's fair to aim for consistency across platforms, it's OK to open a new issue describing the desired behavior.

@hramos
Copy link
Contributor

hramos commented Jan 25, 2019

Follow up to my last comment: My understanding is that this is now consistent across both platforms. Previously, if you were to only test on iOS but targeted Android as well, it would be possible to ship an app to production without catching this. We now crash on both iOS and Android.

I do agree this behavior is surprising and leads to a bad DX, so I'm re-opening the issue.

@hramos hramos reopened this Jan 25, 2019
@hramos hramos added Platform: iOS iOS applications. DX Issues concerning how the developer experience can be improved. and removed Resolution: For Stack Overflow A question for Stack Overflow. Applying this label will cause issue to be closed. ⏪Old Version labels Jan 25, 2019
@hramos hramos changed the title APP crashes on android when "&&" used in JSX "Text strings must be rendered within a Text component" when && operator is used in JSX Jan 25, 2019
@hramos hramos removed the Bug Report label Feb 6, 2019
@jamonholmgren
Copy link
Collaborator

@hramos Would you expect an empty string and/or 0 to not crash (and instead just act as if false or null or undefined were passed)? (That would be my vote!)

We got bit by this again last week due to the client's API switching to returning 0 instead of null in a particular area, so it started crashing without warning.

Exacerbating the problem was this ongoing issue with our exception handler, where this problem can just show a white screen and the handler doesn't actually catch the invariant exception:

a7ul/react-native-exception-handler#52

@hramos hramos added the 📮Known Issues This indicates an issue that refers to a bug or limitation of RN that is not currently being handled label Feb 23, 2019
@ericlewis
Copy link
Contributor

@jamonholmgren I would expect empty strings / 0 to not crash personally, I got bit by this too, only in release.

@jimji1005
Copy link

For anyone that wants to see the errors in person
Will crash

{0 && <Text>0</Text>}
{'' && <Text>isEmptyString</Text>}

Will not crash

{undefined && <Text>isUndefined</Text>}
{true && <Text>isTrue</Text>}
{false && <Text>isFalse</Text>}
{1 && <Text>isNumber</Text>}
{null && <Text>isNull</Text>}
{'string' && <Text>isString</Text>}

{!undefined && <Text>!isUndefined</Text>}
{!true && <Text>!isTrue</Text>}
{!false && <Text>!isFalse</Text>}
{!0 && <Text>!0</Text>}
{!1 && <Text>!isNumber</Text>}
{!null && <Text>!isNull</Text>}
{!'string' && <Text>!isString</Text>}
{!'' && <Text>!isEmptyString</Text>}

@arnotixe
Copy link

arnotixe commented May 3, 2019

got hit by this today :/ Strange error message though.
Workaround with ternary works; apart from a fix, maybe an eslint rule could help here too?
(react-native-cli: 2.0.1
react-native: 0.58.5)

@ArGeoph
Copy link

ArGeoph commented May 6, 2019

Got the same error today with React Native 0.58.4. Was able to make it work by adding !! before a boolean expression. Hope this bug will be fixed in later React Native releases.

@stale
Copy link

stale bot commented Aug 4, 2019

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

@stale stale bot added the Stale There has been a lack of activity on this issue and it may be closed soon. label Aug 4, 2019
@stale
Copy link

stale bot commented Aug 11, 2019

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.

@stale stale bot closed this as completed Aug 11, 2019
@facebook facebook locked as resolved and limited conversation to collaborators Aug 12, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Bug DX Issues concerning how the developer experience can be improved. 📮Known Issues This indicates an issue that refers to a bug or limitation of RN that is not currently being handled Platform: Android Android applications. Platform: iOS iOS applications. Stale There has been a lack of activity on this issue and it may be closed soon.
Projects
None yet
Development

No branches or pull requests