React & Redux: "form submission canceled because the form is not connected"

Question

I am still new in React and Redux. So, I know the existence of redux-form, but Im not intend to use in this project. So, what I am doing is creating a form without using redux-form. This form will grab the data from the reducers and pass it to backend API.

This is my main CreateListing.jsx page.

    // @flow
   import React from 'react';
   import { connect } from 'react-redux';
   import { Helmet } from 'react-helmet';
   import { SEOService } from '[services]';
   import CreateListingFormPage1 from './CreateListing/CreateListingFormPage1';
   import CreateListingFormPage2 from './CreateListing/CreateListingFormPage2';
   import CreateListingFormPage3 from './CreateListing/CreateListingFormPage3';
   import WhereAmI from './CreateListing/WhereAmI';
   import SuccessCreateListing from './CreateListing/SuccessCreateListing';

   type Props = {
    ...props...
  };

  class CreateListing extends React.Component {

getPageBySequence(pagenum) {
  // depending on whether User is logged in or not, show/hide the Login/Signup form which is Page3
  let sequence = [ CreateListingFormPage1, CreateListingFormPage2, CreateListingFormPage3 ];
  if (this.props.isLoggedIn) {
    sequence = [ CreateListingFormPage1, CreateListingFormPage2, CreateListingFormPage2 ];
  }
  return sequence[pagenum-1];
}

getSubmitCreateListing = (e) => {
  e.preventDefault();

  const propertyType = this.props.listingType;
  const propertyName = this.props.suggestedBuildings.selected;
  const propertyBuildingType = this.props.propertyBuildingType;
  const bedrooms = this.props.bed;
  const bathrooms = this.props.bath;
  const price = this.props.price;
  const builtUp = this.props.builtUp;
  const title = this.props.title;
  const tenure = this.props.tenure;
  const description = this.props.description;

  /* IN CASE USER NOT YET LOGGGED IN */
  if(this.props.isLoggedIn === false) {
    const email =  this.props.email;
    const password = this.props.password;

    this.props.cacheCreateListing({ email, password, propertyType, propertyName, propertyBuildingType, bedrooms, bathrooms, price, builtUp, title, tenure, description });
  }

  this.props.cacheCreateListing({ propertyType, propertyName, propertyBuildingType, bedrooms, bathrooms, price, builtUp, title, tenure, description });

  if(CreateListingFormPage1.landedTypes.includes(propertyBuildingType)) {
    this.props.geocodingRequired(true);
  }
  else {
    this.props.geocodingRequired(false);
  }
  this.props.onSubmitCreateListing();
}

onAuthenticateAndCreateListingButton() {
  if(this.props.isLoggedIn) {
    return(
      
        
          
        
        
          
        
      
    )
  }
  return 
    
  
}

render() {
  if(this.props.isListingCreated){
    return ;
  }
  else if(this.props.isListingLoading){
    return 
  }
  const CurrentPage = this.getPageBySequence(this.props.formCurrentPage);
  return (
    
      
        { SEOService.getMetaTitle('Create Property Listing') }
        { SEOService.getCanonicalTag('/blogs') }
      
      
        
          
            
          
          
            
              
              
                
                {/* CHANGE THIS this.props.formCurrentPage < 3 later */}
                 1 && this.props.formCurrentPage < 4 ? '':'displayNone'}`}>
                  
                
                { this.onAuthenticateAndCreateListingButton() }
                
              
            
          
        
      
    
  );
}
  };

  const MapStateToProps = (state: State) => ({...});

  const MapDispatchToProps = (dispatch: Dispatch) => ({
   onLoadingCreateListing: () => dispatch({type: 'CREATE_LISTING_LOADING'}),
   onSubmitCreateListing: () => dispatch({type: 'CREATE_LISTING_SUBMIT_FORM'}),})

  export default connect(MapStateToProps,MapDispatchToProps)(CreateListing);

So, my are all from CreateListingFormPage1, CreateListingFormPage2 and CreateListingFormPage3 and put together in . My

is in this CreateListing.jsx page. Im not whether it is allowed to do it like this.

So, when I click submit, I got warning of Form submission canceled because the form is not connected.

My example of in CreateListingFormPage1 are:

    // @flow
  import React from 'react';
  import { connect } from 'react-redux';
  import {Dropdown} from '[elements]';

  type Props = {...props...};

  class CreateListingFormPage2 extends React.Component {
    static get selectTenure() { return ["Select Tenure"].concat(this.tenureTypes) };
static get selectTitle() { return ["Select Title"].concat(this.titleTypes) };
static get selectBedroom() { return["Select Bedrooms no"].concat(this.bedroomNo) };
static get selectBathroom() { return["Select Bathrooms no"].concat(this.bathroomNo) };
static get tenureTypes(){
  return[
    "FREEHOLD",
    "LEASEHOLD",
    "OTHERS"
  ]};
  static get titleTypes(){
    return[
      "RESIDENTIAL",
      "COMMERCIAL",
      "INDUSTRIAL"
    ]};
  static get bedroomNo(){
    return[
      "1",
      "2",
      "3",
      "4",
      "5"
    ]};
  static get bathroomNo(){
    return[
      "1",
      "2",
      "3",
      "4",
      "5"
    ]};

get selectTenure() { return this.constructor.selectTenure; }
get selectTitle() { return this.constructor.selectTitle; }
get selectBedroom() { return this.constructor.selectBedroom; }
get selectBathroom() { return this.constructor.selectBathroom; }
get tenureTypes() { return this.constructor.tenureTypes; }
get titleTypes() { return this.constructor.titleTypes; }
get bedroomNo() { return this.constructor.bedroomNo; }
get bathroomNo() { return this.constructor.bathroomNo; }

hasInputError = (name) => {
  if (this.props.errors[name]) {
    return ' is-error';
  }
  return '';
}

render() {
  return (
    
      {/*  */}
        
          No. of Bedrooms
          

          Asking Price
           this.props.onPrice(e.currentTarget.value) } value={this.props.price} placeholder="RM"/>
        

        
          No. of Bathrooms
          

          Built-up Size
           this.props.onBuiltUpSize(e.currentTarget.value) } value={this.props.builtUp} placeholder="sqft."/>
        

        
          Select Tenure
          
        

        
          Select Title
          
        

        
          Upload Photos
          
        

        
          Describe your property
           this.props.onDescription(e.currentTarget.value) } value={this.props.description} placeholder="Describe your property"/>
        </div>
    </div>
  );
}
  };


  const MapStateToProps = (state: State) => ({
   ...
  });

  const MapDispatchToProps = (dispatch: Dispatch) => ({
   ...
  })

  export default connect(MapStateToProps, MapDispatchToProps)(CreateListingFormPage2);
</code></pre>

<p>Basically, there is nothing wrong with my <code>redux</code> store. All the value of the <code>input</code> is captured successfully. The problem is when submitting the form, either the <code>onSubmit</code> or my form structure method is incorrect.</p>

<p>This is <code>CreateListing.js</code> reducer should it be helpful:</p>

<pre><code>const INITIAL_STATE= {
 isListingLoading: false,
 isListingCreated: false,
}
const CreateListing = (state = INITIAL_STATE, action) => {
 switch(action.type){
 case 'CREATE_LISTING_LOADING':
        return Object.assign({}, state, {isListingLoading: true});
 case 'CREATE_LISTING_SUBMIT_FORM':
        return Object.assign({}, state, {isListingCreated: true});
 default:
        return state;
} }
 export default CreateListing;
</code></pre>

<p>Any help is much appreciated. </p>

Amruth · Accepted Answer

if you have any other buttons in your form you should add type="button". so make changes like this.

React & Redux: "form submission canceled because the form is not connected"

Answers (1)

Related Questions

React &amp; Redux: &quot;form submission canceled because the form is not connected&quot;

Answers (1)

Related Questions

React & Redux: "form submission canceled because the form is not connected"