HandleSubmit Function Appears To Be Refreshing Page Without Firing Any Internal Logic

The handleSubmit function seems to refresh the page without firing any of the internal logic. I've set up a few console.log's along the way to test out if the internally declared const that's set to the venue property in the state would log, but nothing appears.

I've commented on various parts of the function stepwise starting with setting the scheduling variable to my Firebase schedule table.

After that, I changed the handleSubmit function from an arrow function to just handleSubmit(e) (sorry, I'm new to this so I'm not familiar with the terminology)

import React, {Component} from 'react';
import FrontNav from './nav.js';
import firebase from '../Firebase';

class FrontSchedule extends Component {

  constructor () {
    super();
    this.state = {
      venue:'',
    }
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }


  handleChange = (e) => {
    e.preventDefault();
    this.setState ({
      venue: e.target.value,
    });
  }

  handleSubmit = (e) => {
    e.preventDefault();
    // let schedule = firebase.database().ref('schedule')
    const item = {
      venue: this.state.venue,
    }
    console.log(item);
    // schedule.push(item);
    // console.log(firebase.database().ref('schedule'));
    console.log(this.state.venue);
    // this.setState({
    //   venue:'',
    // })
  }


  render(){
    return(
      <div>
      <FrontNav/>
      <h1>Schedule</h1>

      <form>
      <input type="text"
             name="venue"
             onChange={this.handleChange}
             onSubmit={this.handleSubmit}
             value={this.state.venue}/>

      <button onSubmit={this.handleSubmit}> Enter Event </button>
      </form>
      </div>
    );
  }
}

export default FrontSchedule;

Herein lies the crux of the problem. The page refreshes and the input bar clears, but no error message is provided. At this point, I'm really confused about what is going on here. Any feedback is appreciated!

Let us consider the following example:-

<form>
  <label>
    Name:
    <input type="text" name="name" />
  </label>
  <input type="submit" value="Submit" />
</form>

Now, when we press on submit button the default behavior to browse to a new page. If you want this behavior it works out of the box in ReactJS. But in cases where you need more sophisticated behavior like form validations, custom logic after the form is submitted you can use controlled components.

We can do so by using following:-

      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" value={this.state.value} onChange={this.handleChange} />
        </label>
        <input type="submit" value="Submit" />
      </form>

Now coming to your solution it can be implemented as follows:-

class FrontSchedule extends React.Component {
  constructor () {
    super();
    this.state = {
      venue:'',
    }
/*     this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this); */
  }


  handleChange = (e) => {
    e.preventDefault();
    this.setState ({
      venue: e.target.value,
    });
  }

  handleSubmit = (e) => {
    event.preventDefault();
    // let schedule = firebase.database().ref('schedule')
    const item = {
      venue: this.state.venue,
    }
    console.log(item);
    // schedule.push(item);
    // console.log(firebase.database().ref('schedule'));
    console.log(this.state.venue);
    // this.setState({
    //   venue:'',
    // })
  }


  render(){
    console.log(this.state);
    return(
      <div>
      <h1>Schedule</h1>
      <form onSubmit={this.handleSubmit}>
      <input type="text"
             name="venue"
             onChange={this.handleChange}
             onSubmit={this.handleSubmit}
             value={this.state.venue}/>

      <input type="submit" value="Submit"/>
      </form>
      </div>
    );
  }
}

ReactDOM.render(<FrontSchedule />, document.querySelector("#app"))

Hope it helps :)

You can read more at react documentationhere