How I can to check in the render that an element is empty (React Native)

Question

I have a file json but sometimes this file json doesn't have the image.

Sometimes this item this empty: item.better_featured_image.media_details.sizes.medium.source_url

 render() {
    const { loading, posts } = this.state;
    if (loading) {
      return (
        <View style={styles.container}>
          <Text>Cargando .....</Text>
        </View>
      );
    }
    categorie_title = this.props.navigation.getParam("categorie_name");
    return (
      <View>
        <FlatList
          data={this.state.posts}
          renderItem={({ item }) => (
            <TouchableOpacity
              onPress={() =>
                this.props.navigation.navigate("Noticia", {
                  post_id: item.id,
                })
              }
            >
              <Card>
                <Card.Content>
                  <Title>{item.title.rendered}</Title>
                </Card.Content>                    
                <Card.Cover
                  source={{
                    uri:
                      item.better_featured_image.media_details.sizes.medium
                        .source_url
                  }}
                />
                <Card.Content>
                  <HTML html={item.excerpt.rendered} />
                </Card.Content>
              </Card>
            </TouchableOpacity>
          )}
          keyExtractor={item => item.id.toString()}
        />
      </View>
    );
  }

I just need a conditional - if.

The question was if this component item.better_featured_image.media_details.sizes.medium.source_url is empty, don't show the image.

This is the error:

Your last question doesn't make any sense. Can you use a translator or smaller sentences to help us understand? Also ... try reading this first ... https://stackoverflow.com/questions/154059/how-to-check-empty-undefined-null-string-in-javascript — Mirv - Matt, Jan 25 '20 at 00:54

score 1 · Accepted Answer · edited Jan 27 '20 at 19:58

When you are in JSX don't forget that you still are in javascript land so just add a conditional:

              <Card>
                <Card.Content>
                  <Title>{item.title.rendered}</Title>
                </Card.Content>        
                {/*if you have data render it else render nothing */}
                {item.better_featured_image ?              
                (<Card.Cover
                  source={{
                    uri:
                      item.better_featured_image.media_details.sizes.medium
                        .source_url
                  }}
                />) : null}
                <Card.Content>
                  <HTML html={item.excerpt.rendered} />
                </Card.Content>
              </Card>

Thanks for your help, just made an change and worked. Now correct your answer. This is the correct validation in the conditional - if: item.better_featured_image — juanitourquiza, Jan 27 '20 at 17:15

score 0 · Answer 2 · answered Jan 29 '20 at 21:52

0

Also yo can use a shortcut:

{item.better_featured_image && <Card.Cover
  source={{ uri: item.better_featured_image.media_details.sizes.medium.source_url}} />
}

answered Jan 29 '20 at 21:52

Matias Eduardo Gonzalez Romero

1

How I can to check in the render that an element is empty (React Native)

2 Answers2