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(`.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>

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/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>

• javascript
• reactjs
• axios
• weather-api

Share Improve this question Follow edited Jun 12, 2018 at 0:05 Antonio Pavicevac-Ortiz asked Jun 11, 2018 at 23:09 Antonio Pavicevac-OrtizAntonio Pavicevac-Ortiz 7,7972020 gold badges7676 silver badges158158 bronze badges 1

• 1 in the handleSubmit you call this.onSubmit which is not defined in the code snippet you show us. also as stated. you dont need to bind this multiple times. best in the constructor then just call it normally. or if you want you could always use fat arrow functions that auto bind the lexical scope. so you wont need to call .bind(this) anymore. but as to the source of the error. like I said. in the handleSubmit you're calling this.onSubmit which doesnt look defined on this. maybe you wanted to call this.props.onSubmit or something? – Jony-Y Commented Jun 11, 2018 at 23:43

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 2

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 remended place for it is in your constructor.