React Native JSX IF statement

react native if statements

This short article represents how to insert ‘If‘ statements into React Native JSX code.

If-Then-Else statements are used in JSX code to display some parts depending on some conditions.

Let’s imagine, you are displaying the list of records and if the list is empty, there should be the corresponding text. This is how you should implement it.

If-then-else statement in React Native

For if statement inside JSX code we will use an arrow function:

<View>
  {(() => {
    if (records.length != 0) {
      // RENDER RECORDS
    } else {
      return <Text>No records found.</Text>
    }
  })()}
</View>

So, this code checks the size of records array. If it is not empty, there should be the code for items rendering. Otherwise, the text element is returned.

Leave a Reply

1 Comment on "React Native JSX IF statement"


Guest
Kevin
1 year 6 months ago

This is exactly what I was looking for! Thank you!. This needs to be higher in the Google search for sure.
I also wanted to ask two things:
1. Why is there an open and close parenthesis at the end of the arrow function? I’m talking about the line before the last one, ” })()} ”
2. How can I return multiple nested and non-nested components?.