Console error: "Form submission canceled because the form is not connected"

Question

I'm getting the console error: "Form submission canceled because the form is not connected"

According to this thread I need to add the following line somewhere:

document.body.appendChild(form);

Being new to React.js I tried placing this inside my main component's render function as well as above it. Both broke the page. I also tried adding it to the index.js file and that broke the page as well.

If this is the proper code for a react.js based form, where should it be placed exactly?

Usurvey.js (contains 2 forms, I get 1 error upon the initial load)

import React, { Component } from 'react'

const firebase = require('firebase')
const shortid = require('shortid')

// Initialize Firebase
var config = {
  apiKey: "[removed]",
  authDomain: "[removed]",
  databaseURL: "[removed]",
  projectId: "[removed]",
  storageBucket: "[removed]",
  messagingSenderId: "[removed]"
};
firebase.initializeApp(config);

class Usurvey extends Component {

  handleNameSubmit(event) {
    var nameValue = this.refs.nameRef.value
    this.setState({
      studentName: nameValue
    }, function() {
      // console.log(this.state)
    })
  }

  handleAnswerSelect(e) {
    // var answers = e.target.value
    let answers = this.state.answers

    if (e.target.name === 'answer1') {
      answers.answer1 = e.target.value
    }    else if (e.target.name === 'answer2') {
      answers.answer2 = e.target.value
    }   else  if (e.target.name === 'answer3') {
      answers.answer3 = e.target.value
    }
    this.setState({
      answers: answers
    }, function () {
      console.log(this.state)
    })
  }

  handleQuestionSubmit () {
    firebase.database().ref('uSurvey/'+this.state.uid).set({
      studentName: this.state.studentName,
      answers: this.state.answers
    })
    this.setState({
      isSubmitted: true
    })
  }


  constructor(props) {
    super(props)

    this.state = {
      uid: shortid.generate(),
      studentName: '',
      answers: {
        answer1: '',
        answer2: '',
        answer3: ''
      },
      isSubmitted: false
    }
    this.handleNameSubmit = this.handleNameSubmit.bind(this);
    this.handleAnswerSelect = this.handleAnswerSelect.bind(this)
    this.handleQuestionSubmit = this.handleQuestionSubmit.bind(this)
  }

  render() {
    let nameHTML
    let questionsHTML

    if (this.state.studentName === '' && this.state.isSubmitted === false) {
      nameHTML = (
        <div>
          <h1>Hi, what is your name?</h1>
          <form className="formTag" id="form1" onSubmit={this.handleNameSubmit}>
            <input className="form-input" id="test-id" type="text" placeholder="Enter your name" ref="nameRef" />
          </form>
        </div>
      )
      questionsHTML = ''
    } else if (this.state.studentName !== '' && this.state.isSubmitted === false) {
        // nameHTML = <h1>Thanks for filling out our form, {this.state.studentName}</h1>
      questionsHTML = (
        <div>
          <h2>Questions</h2>
          <form className="formTag" id="form2" onSubmit={this.handleFormSubmit}>
            <div className="card">
              <label htmlFor="">What courses do you prefer?</label>
              <br/>
              <input type="radio" name="answer1" value="Technology" onChange={this.handleAnswerSelect}/> Technology
              <input type="radio" name="answer1" value="Design" onChange={this.handleAnswerSelect}/> Design
              <input type="radio" name="answer1" value="Marketing" onChange={this.handleAnswerSelect}/> Marketing
            </div>

            <div className="card">
              <label htmlFor="">What is your Age?</label>
              <br/>
              <input type="radio" name="answer2" value="<20>" onChange={this.handleAnswerSelect}/> 20 or less
              <input type="radio" name="answer2" value="21-30" onChange={this.handleAnswerSelect}/> 21-30
              <input type="radio" name="answer2" value="30+" onChange={this.handleAnswerSelect}/> 30+
            </div>

            <div className="card">
              <label htmlFor="">What is your learning objective?</label>
              <br/>
              <input type="radio" name="answer3" value="Freelance" onChange={this.handleAnswerSelect}/> Freelance
              <input type="radio" name="answer3" value="Front-End" onChange={this.handleAnswerSelect}/> Front-End
              <input type="radio" name="answer3" value="Back-End" onChange={this.handleAnswerSelect}/> Back-End
            </div>

            <input className="feedback-button" type="submit" value="submit" />
          </form>
        </div>
      )

    } else if (this.state.studentName !== '' && this.state.isSubmitted === true) {
      nameHTML = <h1>Thanks for submitting our survey, {this.state.studentName}</h1>
    }
    return (
      <div>
        {nameHTML}
        {/*------------------*/}
        {questionsHTML}
      </div>
    )
  }
}

export default Usurvey

Answer 1

You could add event.preventDefault(); on the handleNameSubmit function

 handleNameSubmit(event) {
    var nameValue = this.refs.nameRef.value
    this.setState({
      studentName: nameValue
    }, function() {
      // console.log(this.state)
    })

    event.preventDefault(); // add event.preventDefault();
 }