How to call Promise.all in a handler function in React.js

Question

I have two API calls that I am trying to make based on the input;

api.js

import axios from 'axios';

export const getWeather = input => {
};

export const getForecast = input => {
};

And in my React component:

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

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

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

  componentDidMount() {
    console.dir(dataTracker);
  }

  handleChange(event) {
    this.setState({
      input: event.target.value,
    });
  }

  // prettier-ignore
  handleSubmit(event) {
    event.preventDefault();
    var promises = Promise.all(api.getWeather(this.state.input), api.getForecast(this.state.input))

    promises.then(function(input) {
      this.setState({ weatherFromInput: input[0], input: '' });
      console.log("input", input[0]);
    }.bind(this));
  }

  render() {
    return (
      <div className="container">
        <div className="container">
          <form name="weatherApp" onSubmit={this.handleSubmit}>
            <h2>Open Weather App</h2>
            <div className="row">
              <div className="one-half column">
                <label htmlFor="insertMode">Insert your location</label>
                <input
                  name="zipcode"
                  className="u-full-width"
                  placeholder="please enter city or zipcode"
                  type="text"
                  autoComplete="off"
                  value={this.state.input}
                  onChange={this.handleChange}
                />
              </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">
                <input type="submit" value="Submit" />
              </div>
            </div>
          </form>
        </div>

        <div className="container">
          <div className="row">
            <div className="twelve columns">
              {this.state.weatherFromInput !== null ? <WeatherDisplay weather={this.state.weatherFromInput} /> : null}
            </div>
          </div>
        </div>
      </div>
    );
  }
}

I get this error:

App.js:77 Uncaught (in promise) TypeError: undefined is not a function

Any help will be appreciated!

Which one is line 77? What exactly is `undefined`? How is `handleSubmit` called? — Felix Kling, Jun 12 '18 at 20:33
@FelixKling Good point. What i had was pretty sparse. I updated the question! — Antonio Pavicevac-Ortiz, Jun 12 '18 at 20:46
doesn't Promise.all expect an array? does it work with an argument list like that? — Trey, Jun 12 '18 at 20:50

score 1 · Answer 1 · answered Jun 12 '18 at 20:52

1

I believe Promise.all() needs an array, so:

var promises = Promise.all(api.getWeather(this.state.input), api.getForecast(this.state.input))

should be

var promises = Promise.all([api.getWeather(this.state.input), api.getForecast(this.state.input)])

answered Jun 12 '18 at 20:52

Trey

5,480
4
23
30

1

Thanks mate! That was it! – Antonio Pavicevac-Ortiz Jun 12 '18 at 20:56

How to call Promise.all in a handler function in React.js

1 Answers1