title: Form submission canceled because the form is not connected in react js. Where am I going wrong?
body: <p><a href="https://i.stack.imgur.com/mEa9i.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/mEa9i.png" alt="enter image description here" /></a>  **This is a redeem Voucher form which I have created , based on the API response data. I have to make the states either true for success or false on failure, untill we get the api response, Loading snippet will be displayed.  **</p>
  <p>Onclick of the avail subscription button, I'm not able to display the loading snippet. In the console it shows &quot;Form submission canceled because the form is not connected &quot;.</p>
  <pre><code>import React, { Component } from 'react';
  import styles from './RedeemVoucher.module.scss'
  import close from '../../../Assets/Images/close_grey.svg'
  import verified from '../../../Assets/Images/verified.svg'
  
  class RedeemVoucher extends Component {
  
      constructor(props){
          super(props);
          this.state = {
              voucherNumber:'',
              pin:'',
              redeemVoucherForm:true,
              isLoading:false,
              error:false,
              verified:false
          }
      }
     
      handleUserInput =(e)=&gt; {
          const name = e.target.name;
          const value = e.target.value;
          this.setState({ [name]: value.replace(/[-/+/?/./`/~/,/{/}/[!/|/@/#/$/%/^/&amp;/*/(/)/_/&gt;/&lt;/:/;/'/&quot;/=A-Za-z]/g,&quot;&quot;)});
        }
        handleSubscription=()=&gt;{
          this.setState({
              isLoading:true,
              redeemVoucherForm:false,
              error:false,
              verified:false
          })
      }
      
  
      render() {
         
          return ( 
              &lt;&gt;
              {this.state.redeemVoucherForm ?
                  &lt;form className={styles.redeem_form}&gt;
                      &lt;img src={close} className={styles.close} onClick={this.props.close_RedeemVoucher_Prompt}/&gt;
                      &lt;p className={styles.head}&gt;Redeem Voucher&lt;/p&gt;
                      &lt;p className={styles.description}&gt;Enter your NCPA Membership Voucher details to avail your free subscription plan&lt;/p&gt;
                          &lt;label className={styles.voucher_number}&gt;Voucher Number &lt;span className={styles.star}&gt;*&lt;/span&gt;&lt;/label&gt;
                              &lt;input 
                              type=&quot;text&quot;
                              placeholder='Enter Voucher Number'
                              className={styles.voucher_number_box}
                              value={this.state.voucherNumber}
                              name='voucherNumber'
                              autoComplete=&quot;off&quot;
                              onChange={(event) =&gt; this.handleUserInput(event)}
                              /&gt;
                          &lt;label className={styles.pin}&gt;Pin &lt;span className={styles.star}&gt;*&lt;/span&gt;&lt;/label&gt;
                              &lt;input
                              type=&quot;text&quot;
                              placeholder=&quot;Enter Pin&quot;
                              className={styles.pin_box}
                              value={this.state.pin}
                              autoComplete=&quot;off&quot;
                              name='pin'
                              onChange={(event) =&gt; this.handleUserInput(event)}
                              /&gt;
                      &lt;button className={styles.avail_subs} onClick={this.handleSubscription} disabled= {!this.state.voucherNumber || !this.state.pin} &gt;Avail Subscription&lt;/button&gt;        
                  &lt;/form&gt; 
  
                  : this.state.isloading ?
  
                  &lt;div className={styles.loading}&gt;
                      &lt;p className={styles.verifying_info}&gt;Verifying Information&lt;/p&gt;
                      &lt;p className={styles.please_wait}&gt;Please Wait&lt;/p&gt;
                      {/* loader */}
                      
                  &lt;/div&gt; 
                  
                   : this.state.error ?
                   
                   &lt;div className={styles.error}&gt;
                       {/* API error response */}
                       &lt;button className={styles.exit}&gt;exit&lt;/button&gt;
                   &lt;/div&gt;
                   
                  : this.state.verified ?
                  
                  &lt;div className={styles.verified}&gt;
                      &lt;p className={styles.verifying_info}&gt;Verifying Information&lt;/p&gt;
                      &lt;p className={styles.please_wait}&gt;Please Wait&lt;/p&gt;
                      &lt;img src={verified} className={styles.verified_img} /&gt;
                  &lt;/div&gt;
                  
                  : null}
              &lt;/&gt; )} 
              
      }
  
  
  export default RedeemVoucher
  </code></pre>