Bootstrap modal in React js

Question

I need to open a Bootstrap Modal from clicking on a button in a Bootstrap navbar and other places  to show data for a component instance  ie  providing  editing  functionality   but I don t know how to accomplish this  Here is my code   EDIT  Code updated   ApplicationContainer   React createClass       render  function             return                lt div className  container-fluid  gt               lt NavBar   gt                   lt div className  row  gt                       lt div className  col-md-2  gt                           lt ScheduleEntryList   gt                       lt  div gt                       lt div className  col-md-10  gt                       lt  div gt                   lt  div gt                   lt ScheduleEntryModal   gt               lt  div gt                        NavBar   React createClass       render  function             return                lt nav className  navbar navbar-default navbar-fixed-top  gt                   lt div className  container-fluid  gt                       lt div className  navbar-header  gt                           lt a className  navbar-brand  href     gt                               lt span className  glyphicon glyphicon-eye-open  gt  lt  span gt                           lt  a gt                       lt  div gt                       lt form className  navbar-form navbar-left  gt                           lt button className  btn btn-primary  type  button  data-toggle  modal  data-target   scheduleentry-modal  gt                               lt span className  glyphicon glyphicon-plus  gt                               lt  span gt                           lt  button gt                       lt  form gt                       lt ul className  nav navbar-nav navbar-right  gt                           lt li gt  lt a href     gt  lt span className  glyphicon glyphicon-user  gt  lt  span gt  Username lt  a gt  lt  li gt                       lt  ul gt                   lt  div gt               lt  nav gt                        ScheduleEntryList   React createClass       getInitialState  function             return  data                  loadData  function               ajax               url    api tasks               dataType   json                success  function data                    this setState  data  data                  bind this                error  function xhr  status  error                    console error   api tasks   status  error toString                   bind this                          componentWillMount  function             this loadData            setInterval this loadData  20000               render  function             items   this state data map function item                return  lt ScheduleEntryListItem item  item  gt  lt  ScheduleEntryListItem gt                        return                lt div className  list-group  gt                   lt a className  list-group-item active  gt                       lt h5 className  list-group-item-heading  gt Upcoming lt  h5 gt                   lt  a gt                   items               lt  div gt                        ScheduleEntryListItem   React createClass       openModal  function                 scheduleentry-modal   modal  show                render  function             deadline   moment this props item deadline  format  MMM Do YYYY  h mm A             return                lt a className  list-group-item  href     onClick  this openModal  gt                   lt h5 className  list-group-item-heading  gt                       this props item title                   lt  h5 gt                   lt small className  list-group-item-text  gt                       deadline                   lt  small gt               lt  a gt                        Modal   React createClass       componentDidMount  function               this getDOMNode                 modal  backdrop   static   keyboard  true  show  false                componentWillUnmount  function               this getDOMNode                 off  hidden   this handleHidden               open  function               this getDOMNode    modal  show                close  function               this getDOMNode    modal  hide                render  function             return                lt div id  scheduleentry-modal  className  modal fade  tabIndex  -1  gt                   lt div className  modal-dialog  gt                       lt div className  modal-content  gt                           lt div className  modal-header  gt                               lt button type  button  className  close  data-dismiss  modal  gt                                   lt span gt  amp times  lt  span gt                               lt  button gt                               lt h4 className  modal-title  gt  this props title  lt  h4 gt                           lt  div gt                           lt div className  modal-body  gt                               this props children                           lt  div gt                           lt div className  modal-footer  gt                               lt button type  button  className  btn btn-danger pull-left  data-dismiss  modal  gt Delete lt  button gt                               lt button type  button  className  btn btn-primary  gt Save lt  button gt                           lt  div gt                       lt  div gt                   lt  div gt               lt  div gt                        ScheduleEntryModal   React createClass       render  function             var modal   null          modal                  lt Modal title  Add Schedule Entry  gt                       lt form className  form-horizontal  gt                           lt div className  form-group  gt                               lt label htmlFor  title  className  col-sm-2 control-label  gt Title lt  label gt                               lt div className  col-sm-10  gt                                   lt input id  title  className  form-control  type  text  placeholder  Title  ref  title  name  title   gt                               lt  div gt                           lt  div gt                           lt div className  form-group  gt                               lt label htmlFor  deadline  className  col-sm-2 control-label  gt Deadline lt  label gt                               lt div className  col-sm-10  gt                                   lt input id  deadline  className  form-control  type  datetime-local  ref  deadline  name  deadline   gt                               lt  div gt                           lt  div gt                           lt div className  form-group  gt                               lt label htmlFor  completed  className  col-sm-2 control-label  gt Completed lt  label gt                               lt div className  col-sm-10  gt                                   lt input id  completed  className  form-control  type  checkbox  placeholder  completed  ref  completed  name  completed   gt                               lt  div gt                           lt  div gt                           lt div className  form-group  gt                               lt label htmlFor  description  className  col-sm-2 control-label  gt Description lt  label gt                               lt div className  col-sm-10  gt                                   lt textarea id  description  className  form-control  placeholder  Description  ref  description  name  description   gt                               lt  div gt                           lt  div gt                       lt  form gt               lt  Modal gt                      return                lt div className  scheduleentry-modal  gt                   modal               lt  div gt                         Other comments and improvements to the code are appreciated

User · Answer

Reactstrap also has an implementation of Bootstrap Modals in React  This library targets Bootstrap version 4  whereas react-bootstrap targets version 3 X

User · Answer

I Created this function   onAddListItem  function          var Modal   ReactBootstrap Modal      React render            lt Modal title  Modal title  onRequestHide  this hideListItem  gt               lt ul class  list-group  gt                   lt li class  list-group-item  gt Cras justo odio lt  li gt                   lt li class  list-group-item  gt Dapibus ac facilisis in lt  li gt                   lt li class  list-group-item  gt Morbi leo risus lt  li gt                   lt li class  list-group-item  gt Porta ac consectetur ac lt  li gt                   lt li class  list-group-item  gt Vestibulum at eros lt  li gt               lt  ul gt           lt  Modal gt         document querySelector   modal-wrapper         And then used it on my Button trigger   To  hide  the Modal   hideListItem  function          React unmountComponentAtNode document querySelector   modal-wrapper

User · Answer

getDOMNode   is deprecated  Instead use ref to access DOM element  Here is working Modal component  Bootstrap 4   Decide whether to show or not to show Modal component in parent component   Example  https   jsfiddle net sqfhkdcy   class Modal extends Component       constructor props            super props             componentDidMount               this modal  modal  show              this modal  on  hidden bs modal   handleModalCloseClick             render             return                lt div gt                   lt div className  modal fade  ref  modal  gt  this modal   modal  id  exampleModal  tabIndex  -1  role  dialog  aria- labelledby  exampleModalLabel  aria-hidden  true  gt                       lt div className  modal-dialog  role  document  gt                           lt div className  modal-content  gt                               lt div className  modal-header  gt                                   lt h5 className  modal-title  id  exampleModalLabel  gt Modal title                                  lt  h5 gt                                   lt button type  button  className  close  data- dismiss  modal  aria-label  Close  gt                                       lt span aria-hidden  true  gt  amp times  lt  span gt                                   lt  button gt                               lt  div gt                               lt div className  modal-body  gt                                                                   lt  div gt                               lt div className  modal-footer  gt                                   lt button type  button  className  btn btn-secondary  data- dismiss  modal  gt Close lt  button gt                                   lt button type  button  className  btn btn-primary  gt Save changes lt  button gt                               lt  div gt                           lt  div gt                       lt  div gt                   lt  div gt               lt  div gt                       Edit   Here are the necessary imports to make it work   import   from  jquery   window jQuery      window        global jQuery

User · Answer

Just add href   scheduleentry-modal  to the element you want to open the modal with  Or using jQuery      scheduleentry-modal   modal  show

User · Answer

Solution using React functional components  import React    useState  useRef  useEffect   from  react   const Modal      title  show  onButtonClick      gt         const dialog   useRef          useEffect      gt      dialog current  modal show    show     hide       show       useEffect      gt      dialog current  on  hide bs modal        gt          onButtonClick  close                return            lt div className  quot modal fade quot  ref  dialog              id  quot modalDialog quot  tabIndex  quot -1 quot  role  quot dialog quot              aria-labelledby  quot modalDialogLabel quot  aria-hidden  quot true quot           gt               lt div className  quot modal-dialog quot  role  quot document quot  gt                   lt div className  quot modal-content quot  gt                       lt div className  quot modal-header quot  gt                           lt h5 className  quot modal-title quot  id  quot modalDialogLabel quot  gt  title  lt  h5 gt                           lt button type  quot button quot  className  quot close quot  aria-label  quot Close quot                              onClick       gt  onButtonClick  close                             gt                               lt span aria-hidden  quot true quot  gt  amp times  lt  span gt                           lt  button gt                       lt  div gt                       lt div className  quot modal-body quot  gt                                                   lt  div gt                       lt div className  quot modal-footer quot  gt                           lt button type  quot button quot  className  quot btn btn-secondary quot                              onClick       gt  onButtonClick  close    gt Close lt  button gt                           lt button type  quot button quot  className  quot btn btn-primary quot                              onClick       gt  onButtonClick  save    gt Save lt  button gt                       lt  div gt                   lt  div gt               lt  div gt           lt  div gt           const App        gt         const   showDialog  setShowDialog     useState false       return            lt div className  quot container quot  gt               lt Modal                 title  quot Modal Title quot                  show  showDialog                  onButtonClick  button   gt                        if button     close   setShowDialog false                      if button     save   console log  save button clicked                                    gt               lt button className  quot btn btn-primary quot  onClick       gt                    setShowDialog true                 gt Show Dialog lt  button gt           lt  div gt

User · Answer

You can use the model from the react-bootstrap from link and it s basically a  function based  function Example       const  show  setShow    useState false     const handleClose        gt  setShow false     const handleShow        gt  setShow true     return        lt  gt         lt Button variant  primary  onClick  handleShow  gt          Launch demo modal        lt  Button gt          lt Modal show  show  onHide  handleClose  animation  false  gt           lt Modal Header closeButton gt             lt Modal Title gt Modal heading lt  Modal Title gt           lt  Modal Header gt           lt Modal Body gt Woohoo  you re reading this text in a modal  lt  Modal Body gt           lt Modal Footer gt             lt Button variant  secondary  onClick  handleClose  gt              Close            lt  Button gt             lt Button variant  primary  onClick  handleClose  gt              Save Changes            lt  Button gt           lt  Modal Footer gt         lt  Modal gt       lt   gt           and You can convert it into the class component  import React    Component   from  react   import   Button  Modal   from  react-bootstrap     export default class exampleextends Component     constructor props        super props       this state           show  false        close  false                render         return          lt div gt           lt Button           variant  none            onClick       gt  this setState   show  true              gt            Choose Profile          lt  Button gt           lt Modal           show  this state show            animation  true            size  md  className    shadow-lg border  gt             lt Modal Header className  bg-danger text-white text-center py-1  gt               lt Modal Title className  text-center  gt                 lt h5 gt Delete lt  h5 gt               lt  Modal Title gt             lt  Modal Header gt             lt Modal Body className  py-0 border  gt              body               lt  Modal Body gt   lt Modal Footer className  py-1 d-flex justify-content-center  gt                 lt div gt                   lt Button                   variant  outline-dark  onClick       gt  this setState   show  false     gt Cancel lt  Button gt                 lt  div gt                 lt div gt                   lt Button variant  outline-danger  className  mx-2 px-3  gt Delete lt  Button gt                 lt  div gt               lt  Modal Footer gt           lt  Modal gt         lt  div gt

User · Answer

The quickest fix would be to explicitly use the jQuery   from the global context  which has been extended with your   modal   because you referenced that in your script tag when you did       window     scheduleentry-modal   modal  show      to show    window     scheduleentry-modal   modal  hide      to hide   so this is how you can about it on react  import React    Component   from  react    export default Modal extends Component       componentDidMount             window     Modal   modal  show               handleClose             window     Modal   modal  hide               render              lt          div className    modal fade          id    ModalCenter          tabIndex    -1          role    dialog          aria - labelledby    ModalCenterTitle          data - backdrop    static          aria - hidden    true   gt               lt              div className    modal-dialog modal-dialog-centered          role    document   gt               lt              div className    modal-content   gt                    your modal body              lt              button         type    button          className    btn btn-secondary          onClick                     this handleClose                gt              Close  lt               button gt   lt            div  gt   lt               div gt   lt            div  gt

User · Answer

You can use React-Bootstrap  https   react-bootstrap github io components modal   There is an example for modals at that link   Once you have loaded react-bootstrap  the modal component can be used as a react component   var Modal   ReactBootstrap Modal    can then be used as a react component as  lt Modal  gt    For Bootstrap 4  there is react-strap  https   reactstrap github io    React-Bootstrap only supports Bootstrap 3

User · Answer

I was recently looking for a nice solution to this without adding React-Bootstrap to my project  as Bootstrap 4 is about to be released     This is my solution  https   jsfiddle net 16j1se1q 1   let Modal   React createClass       componentDidMount              this getDOMNode    modal  show              this getDOMNode    on  hidden bs modal   this props handleHideModal              render            return              lt div className  modal fade  gt               lt div className  modal-dialog  gt                 lt div className  modal-content  gt                   lt div className  modal-header  gt                     lt button type  button  className  close  data-dismiss  modal  aria-label  Close  gt  lt span aria-hidden  true  gt  amp times  lt  span gt  lt  button gt                     lt h4 className  modal-title  gt Modal title lt  h4 gt                   lt  div gt                   lt div className  modal-body  gt                     lt p gt One fine body amp hellip  lt  p gt                   lt  div gt                   lt div className  modal-footer  gt                     lt button type  button  className  btn btn-default  data-dismiss  modal  gt Close lt  button gt                     lt button type  button  className  btn btn-primary  gt Save changes lt  button gt                   lt  div gt                 lt  div gt               lt  div gt             lt  div gt                       propTypes           handleHideModal  React PropTypes func isRequired              let App   React createClass       getInitialState            return  view   showModal  false              handleHideModal            this setState  view   showModal  false               handleShowModal            this setState  view   showModal  true               render        return           lt div className  row  gt               lt button className  btn btn-default btn-block  onClick  this handleShowModal  gt Open Modal lt  button gt               this state view showModal    lt Modal handleHideModal  this handleHideModal   gt    null           lt  div gt                  React render      lt App   gt       document getElementById  container        The main idea is to only render the Modal component into the React DOM when it is to be shown  in the App components render function    I keep some  view  state that indicates whether the Modal is currently shown or not   The  componentDidMount  and  componentWillUnmount  callbacks either hide or show the modal  once it is rendered into the React DOM  via Bootstrap javascript functions   I think this solution nicely follows the React ethos but suggestions are welcome

User · Answer

You can try this modal https   github com xue2han react-dynamic-modal It is stateless and can be rendered only when needed So it is very easy to use Just like this       class MyModal extends Component         render              const   text     this props            return                 lt Modal                 onRequestClose  this props onRequestClose                  openTimeoutMS  150                  closeTimeoutMS  150                  style  customStyle  gt                   lt h1 gt What you input    text  lt  h1 gt                   lt button onClick  ModalManager close  gt Close Modal lt  button gt                lt  Modal gt                                   class App extends Component          openModal               const text   this refs input value             ModalManager open  lt MyModal text  text  onRequestClose       gt  true   gt                      render               return                  lt div gt                   lt div gt  lt input type  text  placeholder  input something  ref  input    gt  lt  div gt                   lt div gt  lt button type  button  onClick  this openModal bind this   gt Open Modal  lt  button gt   lt  div gt                 lt  div gt                                     ReactDOM render  lt App   gt  document getElementById  main

User · Answer

Thanks to  tgrrr for a simple solution  especially when 3rd party library is not wanted  such as React-Bootstrap   However  this solution has a problem  modal container is embedded inside react component  which leads to modal-under-background issue when outside react component  or its parent element  has position style as fixed relative absolute  I met this problem and came up to a new solution    use strict    var React   require  react    var ReactDOM   require  react-dom     var SampleModal   React createClass     render  function         return          lt div className  modal fade  tabindex  -1  role  dialog  gt           lt div className  modal-dialog  gt             lt div className  modal-content  gt               lt div className  modal-header  gt                 lt button type  button  className  close  data-dismiss  modal  aria-label  Close  gt  lt span aria-hidden  true  gt  amp times  lt  span gt  lt  button gt                 lt h4 className  modal-title  gt Title lt  h4 gt               lt  div gt               lt div className  modal-body  gt                 lt p gt Modal content lt  p gt               lt  div gt               lt div className  modal-footer  gt                 lt button type  button  className  btn btn-default  data-dismiss  modal  gt Cancel lt  button gt                 lt button type  button  className  btn btn-primary  gt OK lt  button gt               lt  div gt             lt  div gt           lt  div gt         lt  div gt                  var sampleModalId    sample-modal-container   var SampleApp   React createClass     handleShowSampleModal  function         var modal   React cloneElement  lt SampleModal gt  lt  SampleModal gt        var modalContainer   document createElement  div        modalContainer id   sampleModalId      document body appendChild modalContainer       ReactDOM render modal  modalContainer  function           var modalObj         sampleModalId   gt  modal          modalObj modal  show          modalObj on  hidden bs modal   this handleHideSampleModal         bind this           handleHideSampleModal  function               sampleModalId  remove           render  function            return          lt div gt           lt a href  javascript    onClick  this handleShowSampleModal  gt show modal lt  a gt         lt  div gt                 module exports   SampleApp    The main idea is    Clone the modal element  ReactElement object   Create a div element and insert it into document body  Render the cloned modal element in the newly inserted div element  When the render is finished  show modal  Also  attach an event listener  so that when modal is hidden  the newly inserted div element will be removed

User · Answer

I ve only used bootstrap cdn  css   js  to achieve  reactstrap  like solution  I ve used props children to pass dynamic data from parent to child components  You can find more about this here  In this way you have three separate components modal header  modal body and modal footer and they are totally independent from each other        Modal component import React    Component   from  react    export const ModalHeader   props   gt      return  lt div className  modal-header  gt  props children  lt  div gt       export const ModalBody   props   gt      return  lt div className  modal-body  gt  props children  lt  div gt       export const ModalFooter   props   gt      return  lt div className  modal-footer  gt  props children  lt  div gt       class Modal extends Component     constructor props        super props       this state           modalShow            display   none             this openModal   this openModal bind this       this closeModal   this closeModal bind this          openModal         this setState         modalShow   show         display   block                 closeModal         this setState         modalShow            display   none                 componentDidMount         this props isOpen   this openModal     this closeModal           componentDidUpdate prevProps        if  prevProps isOpen     this props isOpen          this props isOpen   this openModal     this closeModal                 render         return          lt div         className   modal fade     this state modalShow          tabIndex  -1          role  dialog          aria-hidden  true          style    display  this state display           gt           lt div className  modal-dialog  role  document  gt             lt div className  modal-content  gt  this props children  lt  div gt           lt  div gt         lt  div gt                export default Modal     App component import React    Component   from  react   import Modal    ModalHeader  ModalBody  ModalFooter   from    components Modal    import    App css    class App extends Component     constructor props        super props       this state           modal  false            this toggle   this toggle bind this          toggle         this setState   modal   this state modal            render         return          lt div className  App  gt           lt h1 gt Bootstrap Components lt  h1 gt            lt button           type  button            className  btn btn-secondary            onClick  this toggle           gt            Modal          lt  button gt            lt Modal isOpen  this state modal  gt             lt ModalHeader gt               lt h3 gt This is modal header lt  h3 gt               lt button               type  button                className  close                aria-label  Close                onClick  this toggle               gt                 lt span aria-hidden  true  gt  amp times  lt  span gt               lt  button gt             lt  ModalHeader gt             lt ModalBody gt               lt p gt This is modal body lt  p gt             lt  ModalBody gt             lt ModalFooter gt               lt button               type  button                className  btn btn-secondary                onClick  this toggle               gt                Close              lt  button gt               lt button               type  button                className  btn btn-primary                onClick  this toggle               gt                Save changes              lt  button gt             lt  ModalFooter gt           lt  Modal gt         lt  div gt                export default App

[javascript] Bootstrap modal in React.js

Examples related to javascript

Examples related to twitter-bootstrap

Examples related to crud

Examples related to reactjs