title: Conditional Components in React Native
body: <p>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.</p>
  
  <pre><code>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 (
              &lt;Container&gt;
                  &lt;View&gt;
                      &lt;DeckSwiper
                          dataSource={cards}
                          renderItem={item =&gt;
                              &lt;Card style={{ elevation: 3 }}&gt;
                                  &lt;CardItem cardBody&gt;
                                      &lt;Image style={styles.cardImg} source={item.image} /&gt;
                                  &lt;/CardItem&gt;
                                  &lt;CardItem&gt;
                                      &lt;Icon name="heart" style={{ color: '#ED4A6A' }} /&gt;
                                      &lt;Content&gt;
                                          &lt;Text&gt;{item.name}, {item.age}&lt;/Text&gt;
                                          &lt;Text style={styles.profileText2}&gt;{item.occupation}, {item.company}&lt;/Text&gt;
                                          &lt;Text style={styles.profileText2}&gt;{item.education}&lt;/Text&gt;
                                      &lt;/Content&gt;
                                  &lt;/CardItem&gt;
                              &lt;/Card&gt;
                          }
                      /&gt;
                  &lt;/View&gt;
              &lt;/Container&gt;
          );
      }
  }
  
  module.export = Cards;
  </code></pre>