React child element calling the parent element, on value

Question

I'm trying to create a MessageBox(Modal Box) element which gets inputs to form the Modal Box, The close method in MessageBox somehow doesn't call the parent close and inturn get the Modal disappear, any help please ??

export default class MessageBox extends Component{

constructor(props) {
    super(props);
    this.close = this.close.bind(this);
}

close(){
    this.props.callbackParent;
}

render(){
    return (
        <div>
            <Modal show={this.props.visibility} onHide={this.close}>
                <ModalHeader closeButton>
                    <ModalTitle>{this.props.msgHeader}</ModalTitle>
                </ModalHeader>
                <ModalBody>{this.props.msgBody}</ModalBody>
            </Modal>
        </div>
    );
}

}

export default class Product extends Component {

constructor(props) {
    super(props);
    this._initState = {
        showModal: false
    }
    this.state = this._initState;
    this.open = this.open.bind(this);
    this.close = this.close.bind(this);
}

open(){
    this.setState(
        { showModal: true }
    );
}

close(){
    this.setState(
        { showModal: false }
    );
}

render(){
    return (
        <div>
            <Button bsStyle="primary" bsSize="large" onClick={this.open}>
                Go!!!
            </Button>
            <MessageBox visibility={this.state.showModal} msgHeader='Header goes here ...' msgBody='Overlay message body goes here ..' callbackParent={this.close}/>
        </div>
    );
}

};

Answer 1

It seems you are missing the parenthesis on in the close method of MessageBox.

this.props.callbackParent; 

should be

this.props.callbackParent();

(thx to @azium) for the answer.

Answer 2

I got it working by this

export default class MessageBox extends Component{

constructor(props) {
    super(props);
}

render(){
    return (
        <div>
            <Modal show={this.props.visibility} onHide={this.props.callbackParent}>
                <ModalHeader closeButton>
                    <ModalTitle>{this.props.msgHeader}</ModalTitle>
                </ModalHeader>
                <ModalBody>{this.props.msgBody}</ModalBody>
                <ModalFooter>
                    <Button onClick={this.props.callbackParent}>Close</Button>
                </ModalFooter>
            </Modal>
        </div>
    );
}

}