0

I am rendering rows of two items in a React Native flatlets. Usually there are two but sometimes there are only one item in the row because not everything is an even number of things. 

  var row = new Object();
  row.left = card1;
  if (card2 != null);
  row.right = card2;
  rows[] is an array of row which is two items.

// so I have a row of two items but one of them might be null. If it's null I want to put in the placeholder instead.

// item is really a row of two elements. So item.left and item.right is generally not null but sometimes if uneven item.right will be null or undefined.

renderFlatListItem(item) {
  return (
    <View>
     <TouchableHighlight onPress={()=>this.onButtonPress(item.left)}>
    <View>
    <Card  <!-- Card is from react-native-elements TouchableHighlight does not accept it so I wrapped it in View-->
         title={item.left.text+''}
         image={{uri: item.left.imageUrl}}>
    </Card>
    </View>
    </TouchableHighlight>
<!--  $$$$$ I want to be able to switch this one out dynamically depending on if item.right is undefined or not -->
    <TouchableHighlight onPress={()=>this.onButtonPress(item.right)}>        
    <Card
         title={item.right == 'undefined' : 'undefined' item.right.text+''}
         image={{uri: item.right.imageUrl}}>
    </Card>
    </View>
    </TouchableHighlight>
    </View>

  );

}

So I might be able to always leave the right TouchableHighlight in the layout but at the least I need to be able to point to blank imageURL in case it's null. So how do I conditionally change the imageURL and secondly how could I swap out the whole TouchableHighlight view with some other View if row.right is null or undefined? I saw: How to check for an undefined or null variable in JavaScript? About checking null, but I am dereferencing twice. item.right.text so not sure if I can just say

item.right.text || 'Not Available'

What if item.right is null?

And the other thing was what if I want to swap in another view like one that is not highlightable conditionally if item.right is null or undefined. How would I do that?

Community
  • 1
  • 1
gitsensible
  • 551
  • 1
  • 8
  • 19

1 Answers1

2

For conditional render, use the following snippet:

{item.right ? <TouchableHighlight /> : null}

For showing image, if item.right is available, try:

image={{ uri: item.right && item.right.imageUrl }}
vijayst
  • 20,359
  • 18
  • 69
  • 113
  • Ok and if I wanted to put something else it in it's place? {item.right ? : } is correct syntax? Do I need to put inside brackets or anything? – gitsensible May 15 '17 at 07:26
  • how about returning a different URL if item.right is false? – gitsensible May 15 '17 at 09:55
  • I am not convinced that item.right will be ok if item.right is undefined – gitsensible May 17 '17 at 04:05
  • Yes for first comment - no need to put brackets. But putting brackets won't hurt. If item is undefined, it won't work. `item && item.right && item.right.imageUrl` will work. Use the ternary operator for giving alternate url. `item.right ? item.right.imageUrl : alternateUrl` – vijayst May 17 '17 at 13:33