Parent Component isn't passing prop to child Component

So in my Parent component's render function I have:

const BasicDetails = React.createClass({
    propTypes: {
        showFxMargin: bool
    },

    getDefaultProps() {
        return {
            showFxMargin: false
        };
    },
    render() {
        return(
        // other stuff...
        console.log('inside BasicDetails.jsx showFxMargin = ' + showFxMargin);
        <FxMargin
            showFxMargin={showFxMargin}
        />);
    }
 });

and in the child component I have:

import _ from 'lodash';
import React from 'react';

const FxMargin = React.createClass({
    render() {
        const {
            showFxMargin
        } = this.props;
        console.log('inside FxMargin.jsx showFxMargin = ' + showFxMargin);
        return showFxMargin ? (
            <div>
                <h1>FX Margin Baby</h1>
            </div>
        ) : (
            <p></p>
        );
    }
});

export default FxMargin;

In my console I'm getting:

inside BasicDetails.jsx showFxMargin = true 

and inside BasicDetails.jsx showFxMargin = false

But I never get:

inside FxMargin.jsx showFxMargin = true

How am I passing the prop incorrectly? I'm not getting any errors