example doesn't work. - Githubissues

pgee70 commented 7 years ago

your example code doesn't link to bootstrap css. the standard bootstrap modal styling has a default for display:none; which needs to be overwritten using:

.modal{ display:block; }

The button doesnt have a click handler and the state.open isn't set in render it should be instantiated before that it there is a warning if rendering to the document.body - it is preferred to render to tag, eg

import React from 'react';
import {render} from 'react-dom';
import "../../styling/main.scss";
var Modal = require('react-bootstrap-modal');

class App extends React.Component {
    constructor(props)
    {
        super(props);
        this.state={open:false};
        this.handleClick = this.handleClick.bind(this);
    }
    handleClick()
    {
        this.setState({open:true});
    }
    render(){
    let closeModal = () => this.setState({ open: false })

    let saveAndClose = () => {
      api.saveData()
        .then(() => this.setState({ open: false }))
    }

    return (
      <div>
        <button type='button' onClick={this.handleClick}>Launch modal</button>

        <Modal
          show={this.state.open}
          onHide={closeModal}
          aria-labelledby="ModalHeader"
        >
          <Modal.Header closeButton>
            <Modal.Title id='ModalHeader'>A Title Goes here</Modal.Title>
          </Modal.Header>
          <Modal.Body>
            <p>Some Content here</p>
          </Modal.Body>
          <Modal.Footer>
            <Modal.Dismiss className='btn btn-default'>Cancel</Modal.Dismiss>

            <button className='btn btn-primary' onClick={saveAndClose}>
              Save
            </button>
          </Modal.Footer>
        </Modal>
      </div>
    )
  }
}

render(<App />, document.getElementById('app'));

jquense commented 7 years ago

I'm sorry not sure what you mean the examples work fine for me

pgee70 commented 7 years ago

I can tell you i took an hour to get your code working from scratch - reporting these errors are to help your repo work better for others without giving up.

you don't have a link to bootstrap. show= this.state.open literally gives an error reporting that it is not instantiated, because it isn't, that is why it should be set before the render method is called - the constructor seems like a good spot.

jquense commented 7 years ago

again, which examples? because these: https://github.com/jquense/react-bootstrap-modal/tree/master/docs/examples are all working for me

pgee70 commented 7 years ago

go to https://github.com/jquense/react-bootstrap-modal

look for Use

jquense commented 7 years ago

ah ok, yeah, sorry about that. the Readme code is just thrown together to illustrate the Modal component API not to be a working example. please feel free to PR a fix toake the example copy and pasteable