Stuck with getting react bootstrap modal to work

Question

I am having difficulty understanding what I am doing wrong. Basically I just want to get a modal to show when I click on a div. However, nothing happens except this warning:

Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components).

Here is the component in which the modal will appear:

import React from 'react';
import {ModalTrigger} from 'react-bootstrap';
import MyModal from './MyModal';

var PostTitle = React.createClass({
    openPost : function() {      
        var postData = this.props.postData;
        console.log("clicked - openPost");
        return (
      <ModalTrigger modal={<MyModal/>}>
      </ModalTrigger>
        )   
    },
    render : function() {
        var postData = this.props.postData;
        return(
            <div className="item" onClick={this.openPost}>
                <div className="well">
                    <img src={postData.image}/>
                    <p>{postData.title}</p>
                </div>
            </div>
        )
    }
});

export default PostTitle;

Here is the MyModal component:

import React from 'react';
import {Modal} from 'react-bootstrap';

var MyModal = React.createClass({

    render : function() {
        return (
            <Modal {...this.props}>
          <ul className="list-group">
              <li className="list-group-item">Cras justo odio</li>
              <li className="list-group-item">Dapibus ac facilisis in</li>
              <li className="list-group-item">Morbi leo risus</li>
              <li className="list-group-item">Porta ac consectetur ac</li>
              <li className="list-group-item">Vestibulum at eros</li>
          </ul>
        </Modal>
        )
    }
});

export default MyModal;

Answer 1

ModalTrigger was deprecated on July 2015 .

You can store in your component state whether the modal must be shown or not. When the element is clicked you set this.state.show to true . This will show the modal. Once you close/hide the modal you set this.state.show to false and the modal will not be shown.

var PostTitle = React.createClass({
    getInitialState() {
      return {show: false};
    },
    openPost : function() {      
      var postData = this.props.postData;
      console.log("clicked - openPost");
      this.setState({show: true});
    },
    closePost: function () {
      this.setState({show: false});
    },
    render : function() {
        var postData = this.props.postData;
        return(
            <div className="item" onClick={this.openPost}>
                <MyModal show={this.state.show} onHide={this.closePost} />
                <div className="well">
                    <img src={postData.image}/>
                    <p>{postData.title}</p>
                </div>
            </div>
        )
    }
});