Uncaught TypeError: this.onSubmit is not a function in React.js

Question

I am trying to make a call to the Open Source weather API using React.

But I get the following error App.js:59 Uncaught TypeError: this.onSubmit is not a function

This is my api file:

import axios from 'axios';

var key = 'TK421';
var countryCode = 'us';

export const getWeatherByZip = zipCode => {
  return axios
    .get(`http://api.openweathermap.org/data/2.5/weather?zip=${zipCode},${countryCode}&appid=${key}`)
    .then(resp => resp.data);
}; 

And this is my main/app file:

import React, { Component } from 'react';
import * as api from '../utils/api';

import '../scss/app.scss';

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      zipcode: '',
    };
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    var zip = event.target.value;
    this.setState(function() {
      return {
        zipcode: zip,
      };
    });
  }

  handleSubmit(event) {
    event.preventDefault();
    this.onSubmit(
      api.getWeatherByZip(this.state.zipcode).then(
        function(zip) {
          this.setState(function() {
            return {
              zipcode: zip,
            };
          });
        }.bind(this)
      )
    );
  }

  render() {
    return (
      <div className="container">
        <form onSubmit={this.handleSubmit.bind(this)}>
          <h2>Open Weather App</h2>
          <div className="row">
            <div className="one-half column">
              <label htmlFor="insertMode">Insert your location</label>
              <input
                className="u-full-width"
                placeholder="please enter your zipcode"
                type="text"
                autoComplete="off"
                value={this.state.zipcode}
                onChange={this.handleChange.bind(this)}
              />
            </div>
            <div className="one-half column">
              <label htmlFor="showMin">show minimum</label>
              <input type="checkbox" />
              <label htmlFor="showMax">show maximum</label>
              <input type="checkbox" />
              <label htmlFor="showMean">show mean</label>
              <input type="checkbox" />
            </div>
          </div>
          <div className="row">
            <div className="two-half column">
              <button className="button-primary" type="submit" disabled={!this.state.zipcode}>
                Submit
              </button>
            </div>
          </div>
        </form>
      </div>
    );
  }
}

How do I get the proper response back when inputing and submitting a form in react?

UPDATE:

handleSubmit(event) {
    event.preventDefault();
    api.getWeatherByZip(this.state.zipcode).then(
      function(zip) {
        console.log('zip', zip);

        this.setState(function() {
          return {
            zipcode: zip,
          };
        });
      }.bind(this)
    );
  }

And in my JSX:

 <div className="container">
        <form
          onSubmit={() => {
            this.handleSubmit;
          }}
        >
          <h2>Open Weather App</h2>
          <div className="row">
            <div className="one-half column">
              <label htmlFor="insertMode">Insert your location</label>
              <input
                className="u-full-width"
                placeholder="please enter your zipcode"
                type="text"
                autoComplete="off"
                value={this.state.zipcode}
                onChange={this.handleChange.bind(this)}
              />
            </div>
            <div className="one-half column">
              <label htmlFor="showMin">show minimum</label>
              <input type="checkbox" />
              <label htmlFor="showMax">show maximum</label>
              <input type="checkbox" />
              <label htmlFor="showMean">show mean</label>
              <input type="checkbox" />
            </div>
          </div>
          <div className="row">
            <div className="two-half column">
              <button className="button-primary" type="submit" disabled={!this.state.zipcode}>
                Submit
              </button>
            </div>
          </div>
        </form>
      </div>

Answer 1

You have already bound the method handleSubmit to the forms onsubmit event, you don't need to wrap the content of this method in this.onSubmit . This fails, because this method is not defined in the class in your code.

By the way, your binding the this context two times in your code, once in your onsubmit event and once in your constructor. It is sufficient to do this only once, and the recommended place for it is in your constructor.