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 es by default.But In my case it is not ing .

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

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 es by default.But In my case it is not ing .

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

• javascript
• reactjs
• redux
• react-redux
• reactstrap

1 Answer 1

First question: You need to provide toggle method to your ModalHeader ponent'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.