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

Be the First to Comment!