title: Trying to display a modal in react js when a button is clicked
body: <p>I'm trying to display a modal in react js when I click a button but for some reason it doesn't work.
   This is my modal component:</p>
  
  <pre><code>import React, { Component } from "react";
  import { Modal, ModalHeader, Button, ModalBody, ModalFooter } from "reactstrap";
  
  class InstructionsModal extends Component {
    constructor(props) {
      super(props);
    }
    render() {
      return (
        &lt;Modal&gt;
          &lt;Modal.Header closeButton&gt;
            &lt;Modal.Title id="contained-modal-title-vcenter"&gt;Guide&lt;/Modal.Title&gt;
          &lt;/Modal.Header&gt;
          &lt;Modal.Body&gt;
            &lt;h4&gt;Centered Modal&lt;/h4&gt;
            &lt;p&gt;
              Cras mattis consectetur purus sit amet fermentum. Cras justo odio,
              dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta
              ac consectetur ac, vestibulum at eros.
            &lt;/p&gt;
          &lt;/Modal.Body&gt;
          &lt;Modal.Footer&gt;
            &lt;Button variant="danger" onClick={this.props.onHide}&gt;
              Close
            &lt;/Button&gt;
          &lt;/Modal.Footer&gt;
        &lt;/Modal&gt;
      );
    }
  }
  export default InstructionsModal;
  </code></pre>
  
  <p>This is welcome class in which I call the component <code>onclick</code> on the button called instructions:</p>
  
  <pre><code>let closeModal = () =&gt; {
        this.setState({ viewModal: false });
      }; 
  
  
                 &lt;ButtonToolbar&gt;
                &lt;Button onClick={() =&gt; this.setState({ viewModal: true })}&gt;
                  &lt;Nav&gt;Instructions&lt;/Nav&gt;
                &lt;/Button&gt;
                &lt;InstructionsModal
                  show={this.state.viewModal}
                  onHide={closeModal}
                /&gt;
              &lt;/ButtonToolbar&gt;
  </code></pre>
  
  <p>Any help thanks or any alternative way of doing this?</p>