CODEWITHSUNDEEP
reactjsbootstrap-modal
HardRock
HardRock

Reputation: 1091

Calling modal from if condition React

I have two modals in React:

<Modal  isOpen={this.state.activeModal === 'addedToCart'} id="#addedToCart" show={this.state.show} onHide={()=>{this.handleModal()}}>
          <Modal.Header closeButton> my heading</Modal.Header>
          <Modal.Body> Added Successfully to cart!</Modal.Body>
          <Modal.Footer>
            <Button onClick={()=>{this.handleModal()}}>Continue Shopping</Button>
            <Button onClick={()=>{this.handleGo()}}>See Your Cart</Button>
          </Modal.Footer>
        </Modal>
        <Modal  isOpen={this.state.activeModal === 'selectQuantity'} id="#selectQuantity" show={this.state.showError} onHide={()=>{this.handleModalError()}}>
          <Modal.Header closeButton> My heading</Modal.Header>
          <Modal.Body> Please choose quantity first!</Modal.Body>
        </Modal>

What I am trying to call different modal from this function if quantity is empty then call modal selectQuantity if quantity is chosen then call second modal addedToCart.

handleSubmit(e,id)
   {
    e.preventDefault();
 if(!this.state.qty) {
  $('#selectQuantity').openModal();
 }
 else {
    axios.post('add',{qty:this.state.qty,
      id:id})

     $('#addedToCart').openModal();
    } 
}

Anyone has idea how to do this?

Upvotes: 0

Views: 2355

Answers (1)

user13077374
user13077374

Reputation:

I think:

handleSubmit(e, id) {
   ...
   if(!this.state.qty) {
      this.setState({ activeModal: "selectQuantity" })
   } else {
      ...
      this.setState({ activeModal: "addedToCart" })
   }
}

Upvotes: 1

Related Questions