score:2

Accepted answer

i think your code don't need to change. i think you are missed in others.
try this code. it's the same as your code.

const {
  button,
  modal,
  modalheader,
  modalbody,
  modalfooter
} = reactstrap;

class demo extends react.component {
  constructor(props) {
    super(props);
    this.state = {
      modal: false
    };
  }

  toggle = () => {
    this.setstate(prevstate => ({
      modal: !prevstate.modal
    }));
  }

  render() {
    return (
      <div>
        <button color="primary" onclick={this.toggle}>click here</button>
          
        {/*from here*/}
        
        <modal isopen={this.state.modal} toggle={this.toggle}>
          <modalheader toggle={this.toggle}>modal title</modalheader>
          <modalbody>abc</modalbody>
          <modalfooter>
            <button color="primary" onclick={this.toggle}>
              do something
            </button>
            <button color="secondary" onclick={this.toggle}>
              cancel
            </button>
          </modalfooter>
        </modal>
          
        {/*to here*/}
        
      </div>
    );
  }
}

reactdom.render(<demo />, document.getelementbyid("app"));
<link href="https://npmcdn.com/bootstrap@4.0.0-alpha.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://npmcdn.com/react@15/dist/react-with-addons.min.js"></script>
<script src="https://npmcdn.com/react-dom@15/dist/react-dom.min.js"></script>
<script src="https://npmcdn.com/reactstrap@2/dist/reactstrap.min.js"></script>
<div id="app"></div>


Related Query

More Query from same tag