Console.log error: React Form “Form submission canceled because the form is not connected” even though it's working in submitting

Question

I don't get why I got this error in my console even though the form was working in submitting the data to the list.

Form submission canceled because the form is not connected

I created a React app in which there is a list of boxes with data and I click on the "Add" button. The add form adds another box with data to the list. I looked online for suggestions but couldn't find anything that can help me. Do I ignore the error or fix it?

Here's my code:

import React, { Component } from 'react';
import FormField from './FormFieldBox';
import { CountryDropdown } from 'react-country-region-selector';

function validate(name, isin, country) {
  // true means invalid, so our conditions got reversed
  return {
    name: name.length === 0,
    isin: isin.length === 0,
    country: country === ""
  };
}

export default class PopupForm extends Component {
  constructor(props) {
    super(props)
    this.state = {
      name: '',
      isin: '',
      country: ''
    }
  }

  selectCountry = (e) => {
    this.setState({ country: e });
  }

  updateInput = (e) =>{
    this.setState({[e.target.name]: e.target.value})
  }

  closePopupSubmit = (e) => {
    if (!this.canBeSubmitted()) {
      e.preventDefault();
    }
    let security = {     //1.gather security data from form submit
      name: this.state.name,
      isin: this.state.isin,
      country: this.state.country
     } 
     this.props.submitPopup(security); //2.closePopup function, add security data
  }
  canBeSubmitted() {
    const errors = validate(this.state.name, this.state.isin, this.state.country);
    const isDisabled = Object.keys(errors).some(x => errors[x]);
    return !isDisabled;
  }

  cancelPopupSubmit = (e) => {
    e.preventDefault();
     this.props.cancelPopup();
  }

  render() {
    const errors = validate(this.state.name, this.state.isin, this.state.country);
    const isDisabled = Object.keys(errors).some(x => errors[x]);
    return (
      <div className='popup'>  
      <div className='popup-inner'>  
      <form onSubmit={this.closePopupSubmit} className="add-form">
        <h2>Add Security</h2>
        <div className="form-input">
        <FormField onChange={this.updateInput} className={errors.name ? "input error" : "input"} label="Name" type="text" name="name" value={this.state.name} />
        <FormField onChange={this.updateInput} className={errors.isin ? "input error" : "input"} label="ISIN" type="text" name="isin" value={this.state.isin} />
        <div className="field">
          <label className="label">Country</label>
          <div className="control">
            <CountryDropdown onChange={this.selectCountry} className={errors.country ? "input error" : "input"} value={this.state.country} />
            {Boolean(this.state.country !== "") || (
            <div className="err-msg">
              Please select the country
            </div>
            )}
          </div>
        </div>
        </div>
        <div className="buttons-box">
          <button type="button" onClick={this.cancelPopupSubmit} className="button">Cancel</button>
          <button type="submit" className="button" disabled={isDisabled}>Submit</button>
        </div>
      </form>
      </div>  
      </div>  
    )
  }
}

Answer 1

I believe when you wrapped e.preventDefault() in a conditional on your form submission that this is the root cause of the problem; as it prevents default actions -- in this case, the default action is to prevent a page refresh -- from firing (which is what we always want when working with React!).

That said, I've refactored your code to be less WET (Write Everything Twice) and made your components reusable and more flexible. There are some detailed notes that you can read to help understand the flow and my decision making. Since this is for a job interview, if you really want to impress, start writing tests for your components -- not only will they work, but they'll be backed by tests that prove they work (or break, if the codebase changes)!

If you have any questions, feel free to ask.

Working example: (includes form validation, adding an item to a list and editing an item in place from a list)

---

On a side note, I'd avoid free tutorials as they're usually old/unmaintained, filled with syntax mistakes, and preach bad habits. If you're serious about web development, I'd highly recommend investing in some paid tutorials (like this one -- usually on sale for ~$10) as they're from industry professionals, maintained by the teacher or TAs, and tend to go more in depth about how stuff works.