Can I add two proptypes together after they are rendered? If so, how can I accomplish that?

I have a div with a prop that I would like to display based on whether a prop is bigger in number than another prop. I have a lot going on in this particular component and I'm concerned that all of the following things I'm trying to do are not possible.

this.props.currentValue < this.props.newValue is not working for me, but everything else is working just fine.

I'm very new to React. Any help would be awesome!

Oh, and the value of currentValue and newValue are inside of the rates component on a separate page.

import React, {PropTypes, Component} from 'react';
import Header from '../compare-table-header/compare-table-header';
import './compare-table-row.css';

export class Rates extends Component {
    constructor(props) {
    super(props);
    this.displayThing = this.displayThing.bind(this);
}

displayThing() {
    const increase = <div>{this.props.details}</div>;
    const thing = <div>hi</div>;
    if (this.props.currentValue < this.props.newValue) {
        return increase;
    } else {
        return thing;
    }
}

render() {
    const {currentValue, newValue} = this.props;

    return (
        <div>
            <Header heading="Rates" />
                    <div className="value-heading">{currentValue}</div>
                    <div className="value-heading">{newValue}</div>
                    </div>
                    <div>{this.displayThing}</div>
                </div>
            </div>
        </div>
    );
}
}

Rates.propTypes = {
    currentValue: PropTypes.number,
    newValue: PropTypes.number
};