Objective
---------

Displaying only the fields that are filled in.

Background
==========

In my application people will first fill out the application which has fields like "early reg fee, early reg date, regular reg fee, regular reg date" and so after they fill out all the information and click "view profile" they will see all the fields whether it's filled out or not.

If the value of one of the fields is null or undefined then it would not show up in the profile.

I was trying to do this and I started of by creating a state in the constructor "this.state {value: ''}"

```
class CompetitionProfileView extends React.Component {

    constructor(props) {
        super(props);
        this.state {value: ''}
        this.getContactCard = this.getContactCard.bind(this);
    }

    getCompetitionValue(path) {
        const value = _.get(this.props.competition, path);
        return value ? value : '';
    }

    getCompetitionDateValue(path) {
        const value = _.get(this.props.competition, path);
        return value ? value.toDateString() : '';
    }

    getCompetitionTimeValue(path) {
        const value = _.get(this.props.competition, path);
        return value ? `${
            value.getHours() - 12 
        }:${value.getMinutes()}` : '';
    }

    getContactCard(num) {
        return 
        this.getCompetitionValue(`Information.contactFirstName${num}`) ?
        <Card key={num} style={{backgroundColor: '#f9f9f9', width: '32%'}} zDepth={2}>
        <CardTitle title={`${this.getCompetitionValue(`Information.contactFirstName${num}`)} ${this.getCompetitionValue(`Information.contactFirstName${num}`)}`} subtitle={`${this.getCompetitionValue('Information.contactPosition1')}`} />
       <Divider/>
                      <CardText>
                        <p style={{display: 'flex', justifyContent: 'center'}}><Phone/>{`${this.getCompetitionValue(`Information.contactFirstName${num}`)}`}</p>
                        <p style={{display: 'flex', justifyContent: 'center'}}><Email/>{`${this.getCompetitionValue(`Information.contactFirstName${num}`)}`}</p>
                      </CardText>
                    </Card>
                :
                    '';
            }

            render(actions) {
              return (
                <div>
                  <div className="profileheader" style={{display: 'flex', flexDirection: 'column'}}>
                    <Paper className='banner-image' style={{backgroundImage: `url(${this.getCompetitionValue('Resources.boardPicture.url')})`,backgroundSize: 'cover',width: '100%', height: '200px', backgroundPositionY: '20%'}} zDepth={3}>
                      {/* <br style={{lineHeight: '15'}}/> */}
                    </Paper>
                    <Paper className='text-main' style={{textAlign: 'center'}}>
                      <label>{this.getCompetitionValue('Information.name')}</label>
                    </Paper>
                    <Paper className='logo-image' style={{backgroundImage: `url(${this.getCompetitionValue('Resources.competitionLogo.url')})`, backgroundSize: 'cover', width: '100px', height: '100px', marginTop: '-110px', marginLeft: '3%', paddingbottom: '20px'}} zDepth={3}/>
                  </div>

                  <hr/>

                  <div style={{display: 'flex', justifyContent: 'space-between'}}>
                  <Card style={{backgroundColor: '#f9f9f9', width: '49%'}} zDepth={2}>
                    <RaisedButton style={{display: 'flex', justifyContent: 'center'}} primary={true} label="Application Packet" onClick={() => window.open(this.getCompetitionValue('Resources.applicationPacket.url'), '_blank')}/>
                  </Card>
                  <Card style={{backgroundColor: '#f9f9f9', width: '49%'}} zDepth={2}>
                    <RaisedButton style={{display: 'flex', justifyContent: 'center'}} primary={true} label="Audition Video Info" onClick={() => window.open(this.getCompetitionValue('Resources.auditionVideoInfo.url'), '_blank')}/>
                  </Card>
                  </div>

                  <br/>

                  <div className='mainbody' style={{display: 'flex', flexDirection: 'row', justifyContent: 'space-between'}}>

                    <br/>

                    <div className='rightbody' style={{display: 'flex', flexDirection: 'column', width: '60%', flexWrap: 'wrap'}}>
                      <Card style={{backgroundColor: '#F0EFEF'}} zDepth={2}>
                        <CardHeader title="About Us" />
                        <Divider/>
                        <CardText>{`${this.getCompetitionValue('Information.compBlurb')}`}</CardText>
                      </Card>
                      <br/>
                      <Card style={{backgroundColor: '#F0EFEF'}} zDepth={2}>
                        <CardHeader title="Application Information" />
                        <Divider/>
                        <CardText>
                          <p><b>Early Reg:</b>{` ${this.getCompetitionDateValue('Information.dueDateEarly')}`}</p>
                          <p><b>Early Reg Fee:</b>{` ${this.getCompetitionValue('Information.earlyDues')}`}</p>
                          <p><b>Regular Reg:</b>{` ${this.getCompetitionDateValue('Information.dueDateRegular')}`}</p>
                          <p><b>Regular Reg Fee:</b>{` ${this.getCompetitionValue('Information.regularDues')}`}</p>
                          <p><b>Late Reg:</b>{` ${this.getCompetitionDateValue('Information.dueDateLate')}`}</p>
                          <p><b>Late Reg Fee:</b>{` ${this.getCompetitionValue('Information.lateDues')}`}</p>
                          <p><b>Applications Due At:</b>{` ${this.getCompetitionTimeValue('Information.dueTime')}`}</p>
                          <p><b>Time Zone:</b>{` ${this.getCompetitionValue('Information.timeZone')}`}</p>
                          <p><b>Penalties:</b>{` ${this.getCompetitionValue('Information.extraFees')}`}</p>
                          <p><b>Hear Back Date:</b>{` ${this.getCompetitionDateValue('Information.hearbackDate')}`}</p>
                          <p><b>Payment Method:</b>{` ${this.getCompetitionValue('Information.paymentMethods')}`}</p>
                          <br/>
                        </CardText>
                      </Card>
                    </div>
                  </div>

                   <br/>

                  <div className="contactinfo" style={{display: 'flex', justifyContent: 'space-around'}}>
                    {[1,2,3].map((num) => this.getContactCard(num))}
                  </div>
                   <br/>
                  {this.props.competition.Board.length > 0 &&
                  <Card style={{backgroundColor: '#F0EFEF'}} zDepth={2}>
                  <Table >
                    <TableHeader adjustForCheckbox={false} displaySelectAll={false}>
                      <TableRow>
                        { Object.keys(this.props.competition.Board[0]).map((key) => <TableHeaderColumn key={key}>{key}</TableHeaderColumn>) }
                      </TableRow>
                    </TableHeader>
                    <TableBody displayRowCheckbox={false}>
                      {this.props.competition.Board.map((row, i) => (
                          <TableRow key={i}>
                            { Object.keys(row).map((column) => <TableRowColumn key={column}>{row[column].name ? row[column].name : row[column]}</TableRowColumn>) }
                          </TableRow>
                        ))
                      }
                    </TableBody>
                  </Table>
                  </Card>
                  }
                </div>
              );
            }
          }

          const mapStateToProps = (state) => {
            return {
              messages: state.messages
            };
          };

          export default connect(mapStateToProps)(CompetitionProfileView);

```