React - passing API data from page to class component with PropTypes

Question

import React from 'react'; 
//MortgageCalculatorData are defined from page.jsx pass to this component via PropTypes
import PropTypes from 'prop-types'; 
import { FormattedRelative, FormattedNumber } from 'react-intl';


const propPrice = 200000;
const downPayment = propPrice * 0.1;
const term = 30 + ' years';
const rate = 4.6;


class MortgageCalculatorComponent extends React.Component {
  render() {
    //MortgageCalculatorData are defined from page.jsx pass to this component via PropTypes
    const { MortgageCalculatorData } = this.props;
    return (

      <div className="mortgage-calculator">
  
        <h1>Mortgage Calculator</h1>
        <div className="row">
          <div className="col-md-7">
            <div className="row">
              <div className="col-md-6">
                <div className="form-group">
                  <label>Price:</label>
                  <input className="form-control form-control-sm" type="text" placeholder={MortgageCalculatorData.result.field_prop_asking_price.und['0'].value}
                  ></input>
                </div>
                
                <div className="form-group">
                  <label>Term:</label>
                  <input className="form-control form-control-sm" type="text" placeholder={term} ></input>
                </div>
              </div>
              <div className="col-md-6">
                <div className="form-group">
                  <label>% Down Payment:</label>
                  <input className="form-control form-control-sm" type="text" placeholder="10"></input>
                </div>

                <div className="form-group">
                  <label>Rate:</label>
                  <input className="form-control form-control-sm" type="text" placeholder={rate}></input>
                </div>
              </div>
            </div>
            <div className="row">
              <div className="col-md-8">Mortgage Amount</div>
              <div className="col-md-4 text-right">RM <FormattedNumber value={parseInt(propPrice, 10)} /></div>
            </div>
            <div className="row">
              <div className="col-md-8">Down Payment Amount</div>
              <div className="col-md-4 text-right">RM <FormattedNumber value={parseInt(downPayment, 10)} /></div>
              <div className="col-md-12 separator"> </div>
            </div>
            <div className="row">
              <div className="col-md-8">Monthly Mortgage Payment</div>
              <div className="col-md-4 text-right">RM 4,605</div>
            </div>
          </div>
        </div>
      </div>

    )
  }
}

//MortgageCalculatorData are defined from page.jsx pass to this component via PropTypes
MortgageCalculatorComponent.defaultProps = {
  MortgageCalculatorData: {},
};

MortgageCalculatorComponent.propTypes = {
  // eslint-disable-next-line react/forbid-prop-types
  MortgageCalculatorData: PropTypes.object,
};

export default MortgageCalculatorComponent;