ReactStrap modal close icon is not getting show in the modal and How to use the header with some another tag

Question

I am new to the react js. Here I am using the Modal of reactStrap.

<Modal isOpen={props.isOpen} centered='true'>
        <ModalHeader>
          Change this Question?
          <button type="button" class="close" aria-label="Close" onClick={props.closeModal} ><span aria-hidden="true">×</span></button>
        </ModalHeader>
        <ModalBody>
          <div className="row">
            <div className="col-md-12 text-center ">
              <Button type="submit" className="btn btn-outline-primary" onClick={props.showChangeQuestionModal} >Change by creating your own Question</Button>
            </div>
          </div>
          <div className="row">
            <div className="col-md-12 text-center marginForOrOption">
              <span>or</span>
            </div>
          </div>
          <div className="row">
            <div className="col-md-12 text-center">
              <Button type="submit" color="btn btn-primary">Change and Replace from Question bank</Button>
            </div>
          </div>
        </ModalBody>
        <ModalFooter>
        </ModalFooter>
      </Modal>
    </div>

Now Here I have added that button to close modal . But In reactstrap it comes by default.But In my case it is not coming .

Another problem is that, In the ModalHeader, It comes by default h5 so How can I change that ?

Answer 1

First question: You need to provide toggle method to your ModalHeader component's props if you want reactstrap to show its own close button so your ModalHeader should looks like:

<ModalHeader toggle={this.toggleModalMethod}>
   Change this Question?
</ModalHeader>

Second question: You are not gonna do much with h5 inside of modal header but you definitely can change your h5 element style to make it looks how you want it to look:

<ModalHeader>
  <span className="customStyleToOverrideDefault">Change this Question?</span>
</ModalHeader>

Please, dont forget to vote up for my answer if it helped you.