Invariant Violation: Text strings must be rendered within a component

by

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

Every Single Time. Please. For the love of react native.

More Related Contents:

  1. ReactJS: Maximum update depth exceeded error
  2. Viable options for running NodeJS on Android (Aug 2017)
  3. React Native: require() with Dynamic String?
  4. Pass Data to Service in Axios
  5. What is the difference between React Native and React?
  6. Remembering state before app goes in foreground
  7. Hide header in stack navigator React navigation
  8. How do I setState for nested object?
  9. Passing props into external stylesheet in React Native?
  10. What is prevState in ReactJS?
  11. How to get data returned from fetch() promise?
  12. React Native Android build failure with different errors without any changes in code for past days due to publish of React Native version 0.71.0-rc.0
  13. What is useState() in React?
  14. Navigate to screen after opening a notification?
  15. How can I insert a line break into a component in React Native?
  16. Setting a timer for a long period of time, i.e. multiple minutes
  17. What’s the best way to add a full screen background image in React Native
  18. How to change the behaviour of a mocked import?
  19. How can I run background tasks in React Native?
  20. How to hide bottom navigation bar on a specific screen in react native?
  21. How to show SVG file on React Native?
  22. Do we still need functional setState way in react hooks?
  23. React Navigation how to hide tabbar from inside stack navigation
  24. Binding context when calling ES6 method. How to access object from within method called as callback?
  25. Firebase v9 uploading image shows only 9 bytes
  26. stop dragging after a limit has reached
  27. Could not find “store” in either the context or props of “Connect(App)”
  28. Javascript – Counting duplicates in object array and storing the count as a new object
  29. Is there a workaround for the Firebase Query “IN” Limit to 10?
  30. FlatList renderItem is called multiple times

Leave a Comment