Last active
May 15, 2018 02:55
-
-
Save rparsi/faba795641eb5d6983f3a4c48983eb83 to your computer and use it in GitHub Desktop.
Yolo super simple reactjs
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React, { Component } from 'react'; | |
| import $ from 'jquery'; | |
| class Modal extends Component { | |
| constructor(props) { | |
| super(props); // props are always read only | |
| this.modalRef = React.createRef(); | |
| } | |
| checkIsOpen() { | |
| return (this.props.modalState && this.props.modalState.isOpen); | |
| } | |
| render() { | |
| if (!this.checkIsOpen()) { | |
| return null; | |
| } | |
| return ( | |
| <div ref={this.modalRef} className="modal fade" id="dialogModal" role="dialog" aria-labelledby="dialogModalLabel"> | |
| <div className="modal-dialog" role="document"> | |
| <div className="modal-content"> | |
| <div className="modal-header"> | |
| <h5 className="modal-title" id="dialogModalLabel">{this.props.modalState.title}</h5> | |
| <button type="button" className="close" data-dismiss="modal" aria-label="Close"> | |
| <span aria-hidden="true">×</span> | |
| </button> | |
| </div> | |
| <div className="modal-body"> | |
| {this.props.modalState.body} // how do I ensure that this.props.modalState.body is another component, so the rendering can be determined by user actions? | |
| </div> | |
| <div className="modal-footer"> | |
| <button type="button" className="btn btn-secondary" data-dismiss="modal">Cancel</button> | |
| <button type="button" className="btn btn-primary">Submit</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| ); | |
| } | |
| componentDidUpdate() { | |
| if (!this.checkIsOpen() || !this.modalRef.current) { | |
| return; | |
| } | |
| $(this.modalRef.current).modal('show'); | |
| } | |
| } | |
| export default Modal; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment