I am kind of new to Javascript and I cannot solve this error...
I am trying to use async functions in order to fetch data from API server based on user input. The default this.state.location is "Boston". And I am trying to change this.state.location to user input value.
Not sure why I got this error.. Am I using async await good?

Here's the code:

import React, { Component } from "react";

import { View, Text, Button, StyleSheet, TextInput } from "react-native";



const Separator = () => <View style={styles.separator} />;



class Home extends Component {

  constructor(props) {

    super(props);



    this.state = {

      location: "Boston",

      result: [],

      isLoading: true,

    };

  }



  async getWeatherData() {

    // Weather API

    // documentation: https://www.visualcrossing.com/resources/documentation/weather-api/timeline-weather-api/

    const url =

      "https://weather.visualcrossing.com/VisualCrossingWebServices/rest/services/timeline/" +

      this.state.location +

      "/next7days?unitGroup=us&key&contentType=json";

    const result = await fetch(url);

    const resultJson = await result.json();

    return resultJson;

  }



  weatherData = async () => {

    let result = await getWeatherData();

    return result;

  }



  async componentDidMount() {

    let result_data = await weatherData();

    this.setState({ result: result_data, isLoading: false });

  }



  render() {

    if (this.state.isLoading) {

      return (

        <View>

          <Text>Loading data...</Text>

        </View>

      );

    } else {

      return (

        <View

          style={{

            flex: 1,

            flexDirection: "column",

            alignItems: "center",

            justifyContent: "center",

          }}

        >

          <TextInput

            style={styles.input}

            placeholder="Enter location"

            onChangeText={(location) => this.setState({ location })}

            value={this.state.location}

          />

          <Button

            title="Weather"

            onPress={() => {

              this.props.navigation.navigate("Weather", {

                day0_datetime: this.state.result.days[0].datetime,

                day0_icon: this.state.result.days[0].icon,

                day0_tempmin: this.state.result.days[0].tempmin,

                day0_tempmax: this.state.result.days[0].tempmax,

                day1_datetime: this.state.result.days[1].datetime,

                day1_icon: this.state.result.days[1].icon,

                day1_tempmin: this.state.result.days[1].tempmin,

                day1_tempmax: this.state.result.days[1].tempmax,

                day2_datetime: this.state.result.days[2].datetime,

                day2_icon: this.state.result.days[2].icon,

                day2_tempmin: this.state.result.days[2].tempmin,

                day2_tempmax: this.state.result.days[2].tempmax,

                day3_datetime: this.state.result.days[3].datetime,

                day3_icon: this.state.result.days[3].icon,

                day3_tempmin: this.state.result.days[3].tempmin,

                day3_tempmax: this.state.result.days[3].tempmax,

                day4_datetime: this.state.result.days[4].datetime,

                day4_icon: this.state.result.days[4].icon,

                day4_tempmin: this.state.result.days[4].tempmin,

                day4_tempmax: this.state.result.days[4].tempmax,

              });

            }}

          />

          <Separator />

          <Button

            title="Daily Fashion"

            disabled

            color="#f194ff"

            onPress={() => {

              this.props.navigation.navigate("DailyFashion", {

                day0_datetime: this.state.result.days[0].datetime,

                day0_icon: this.state.result.days[0].icon,

                day0_tempmin: this.state.result.days[0].tempmin,

                day0_tempmax: this.state.result.days[0].tempmax,

              });

            }}

          />

          <Separator />

        </View>

      );

    }

  }

}



const styles = StyleSheet.create({

  separator: {

    marginVertical: 8,

  },

  input: {

    height: 40,

    margin: 12,

    borderWidth: 1,

    padding: 10,

  },

});



export default Home;

Here's the error I got:

[Unhandled promise rejection: ReferenceError: Can't find variable: weatherData]

at node_modules/react-native/Libraries/Core/setUpReactRefresh.js:43:6 in Refresh.performReactRefresh

at node_modules/metro-runtime/src/polyfills/require.js:655:10 in setTimeout$argument_0

Thanks for your help!