
In general, conditional rendering in React Native is the same as inReact. But be aware, that in React Native we can render strings only inside theText
component. So, for example, if we will try to put a string inside aView
we will get an error.
Inline if with logical&&
operator.
<View>{!!error&&<ErrorMessage/>}</View>
☝🏻 Double negation!!
operator is very important here (also we can use theBoolean
function), because it ensures that the left part of the condition will be a boolean value.
Why it is important? Because logical “and” operator&&
will return the right side of the condition if the left side istruthy
. And will return the left side of the condition if the left side isfalsy
.
Imaging we have a component:
<View>{error&&<ErrorMessage/>}</View>
If theerror
variable will be anobject
,null
orundefined
everything will work as expected. But if we will get an empty string for the error (error = ''
) then our component will brake, because we can’t render strings inside aView
component.
// error = ''// {error && <something>} will return the error variable,// which equals to the empty string and we will get:<View> ''</View>// which will throw an error, because we// can't render strings inside a View
Inline if-else with ternary?
operator.
{error?<ErrorMessage/>:<SuccessMessage/>}
or
{error?<ErrorMessage/>:null}
Here we can returnnull
or<></>
(React Fragment) depend on our component structure and return type.
if
statement
...constError=()=>{if(!error){returnnull}return<ErrorMessage/>}return(<View><Error/></View>)
Code example
Please usethis Expo Snack to see the full code and play with it, press 💖 button and happy hacking! 🎉
Credits
Photo byIsaac Struna onUnsplash.
Top comments(0)
For further actions, you may consider blocking this person and/orreporting abuse