jsx

import React, {Component} from 'react';
import { connect } from 'react-redux';

import { fetchListing } from '../../actions/ListingActions';

@connect((store) => {
  return {    
    listing: store.listing.listing,
  };
})
class BuyOrder extends Component {
  componentWillMount() {
    this.props.dispatch(fetchListing());
  }

  render() {
    /*
    the listing object that is passed in via props looks like:
    
    {            
      Title: 'Some Listing',
      BuyFeePercent: 0.04,
    }

    */
    
    // multiplying by 100 causes: Warning: Component's children should not be mutated.
    // This only seems to appear when listing is passed in to props from redux.
    const buyFeePercentLabel = this.props.listing.BuyFeePercent * 100.0;     

    return (
      <div className="row">
        <div className="col-md-8 col-md-offset-2">
          <section className="panel">
            <header className="panel-heading">
              Buy Order for {this.props.listing.Title}
            </header>
            <div className="panel-body">
              {buyFeePercentLabel}
            </div>

          </section>
        </div>
      </div>
    );
  }
}

export default BuyOrder;