Puke function in lines 3-5 allows you to see props passed to a React component without actually having to create the UI

puke.js

var React = require('react');
var PropTypes = React.PropTypes;
var styles = require('../styles');
var Link = require('react-router').Link
var UserDetails = require('../components/UserDetails');
var UserDetailsWrapper = require('../components/UserDetailsWrapper');

function puke(object) {
  return <pre>{JSON.stringify(object, null, ' ')}</pre>;
}

function ConfirmBattle (props) {
  return props.isLoading === true ?
    <p> LOADING! </p> :
      <div className="jumbotron col-sm-12 text-center" style={styles.transparentBg}>
        <h1>Confirm Players</h1>
        <div className='col-sm-8 col-sm-offset-2'>
          <UserDetailsWrapper header='Player 1'>
            <UserDetails info={props.players[0]} />
          </UserDetailsWrapper>
          <UserDetailsWrapper header='Player 2'>
            <UserDetails info={props.players[1]} />
          </UserDetailsWrapper>
        </div>
        <div className='col-sm-8 col-sm-offset-2'>
          <div className='col-sm-12'>
            <button type='button' className='btn btn-lg btn-success' onClick={props.onInitBattle} style={styles.space}>Initiate Battle!</button>
          </div>
          <div className='col-sm-12'>
            <Link to='/playerOne'>
              <button type='button' className='btn btn-lg btn-danger' style={styles.space}>Reselect Players</button>
            </Link>
          </div>
        </div>
      </div>;
}

ConfirmBattle.propTypes = {
  isLoading: PropTypes.bool.isRequired,
  players: PropTypes.array.isRequired,
  onInitBattle: PropTypes.func.isRequired
}

module.exports = ConfirmBattle;