Ad

Stuck With Getting React Bootstrap Modal To Work

- 1 answer

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;
Ad

Answer

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>
        )
    }
});
Ad
source: stackoverflow.com
Ad