Conditional Components in React Native

Question

I'm new to working with React Native and I am wondering what the best way is to create a conditional component that will show when the user data has the field, and hides when it does not. Using education in this example.

import React, { Component } from 'react';
import { StyleSheet, Image, TouchableOpacity } from 'react-native';
import { Container, Content, Button, Icon, View, DeckSwiper, Card, CardItem, Thumbnail, Text, Left, Body} from 'native-base';

import styles from './style';

const cards = [
    {
        _id: 1,
        name: 'John Doe',
        age: 30,
        education: 'State University',
        occupation: 'Programmer',
        company: 'Acme Inc.',
        image: require('img.jpg')
    },
    {
        _id: 2,
        name: 'Jane Doe',
        age: 30,
        education: 'State University',
        occupation: 'Programmer',
        company: 'Acme Inc.',
        image: require('img.jpg')
    },
    {
        _id: 2,
        name: 'Jane Doe',
        age: 30,
        education: 'State University',
        occupation: 'Programmer',
        company: 'Acme Inc.',
        image: require('img.jpg')
    },
];

export default class Cards extends Component {

    constructor(){
        super();
        this.state = {
            showEdu: true
        }
    }

    render() {
        let edu = this.state.showEdu ? this.props.education : '';
        return (
            <Container>
                <View>
                    <DeckSwiper
                        dataSource={cards}
                        renderItem={item =>
                            <Card style={{ elevation: 3 }}>
                                <CardItem cardBody>
                                    <Image style={styles.cardImg} source={item.image} />
                                </CardItem>
                                <CardItem>
                                    <Icon name="heart" style={{ color: '#ED4A6A' }} />
                                    <Content>
                                        <Text>{item.name}, {item.age}</Text>
                                        <Text style={styles.profileText2}>{item.occupation}, {item.company}</Text>
                                        <Text style={styles.profileText2}>{item.education}</Text>
                                    </Content>
                                </CardItem>
                            </Card>
                        }
                    />
                </View>
            </Container>
        );
    }
}

module.export = Cards;

Answer 1

If I understand your question correctly, you want to know how to only display something if the property exists? Something like this should work.

{ item.education &&
    <Text style={styles.profileText2}>{item.education}</Text>
}

Answer 2

Seeing what you have there for education, you could write a separate method something like:

renderEducationField() {
  if (item.education !== '') {
    return (
      <Text style={styles.profileText2}>{item.education}</Text>
    )
  }
}

and then in your render() you would replace <Text style={styles.profileText2}>{item.education}</Text> with {this.renderEducationField()}