Can not excess the value of a variable outside the class

Question

I have this code where it will show the temperature of a place using AccuWeather API. right now I have hardcoded newdelhi into it to find the weather condition of that place.but I want to know the weather by using the form. i am right know testing it with first name input form and trying to send that value in the location function. but I can't use the input given by the user and use it outside the class. need help. i am new in react and appreciate if someone could help me with it. thank you

import React ,{useState,useEffect,state}from 'react';
import './App.css';
const apikey='zVp5GoY9fbwt8h4u5CvcWwneD1emnMMD';

const getcity = async(city) => {
  const base = 'http://dataservice.accuweather.com/locations/v1/cities/search';
  const query = `?apikey=${apikey}&q=${city}`;

  const response = await fetch(base + query);
  const data = await response.json();

  return data[0];
}

getcity('New Delhi')
.then(data => {
  return getweather(data.Key);
}).then(data =>{
  console.log(data);
})
.catch(err =>console.error(err));

const getweather = async(id)=>{

  const base= 'http://dataservice.accuweather.com/currentconditions/v1/';
  const query =`${id}?apikey=${apikey}`;

  const response = await fetch(base + query)
  const data = await response.json();

  return data[0];
}

let newval = "initial value";
console.log(newval)

export default class CustomerForm extends React.Component {  
  constructor(props) {
    super(props); 

    this.state = {
      customer: {
        firstName: props.firstName,
        lastName: props.lastName,
        status: props.status,
        
      }
    } 
  }

  handleFirstNameChanged(event) {
    var customer        = this.state.customer;
    customer.firstName  = event.target.value;

    this.setState({ customer: customer });
  }

  handleLastNameChanged(event) {
    var customer      = this.state.customer;
    customer.lastName = event.target.value;

    this.setState({ customer: customer });
  }

  handleStatusChanged(event) {
    var customer    = this.state.customer;
    customer.status = event.target.value;
    this.setState({ customer: customer });
  }
  
  
  handleButtonClicked() {
    console.log(this.state.customer);
    newval=this.state.customer.firstName;
    console.log(newval);
  }
  
  render() {
    return (
      <div>
        <label>
          First Name: 
        </label>
        <input type="text" value={this.state.customer.firstName} onChange={this.handleFirstNameChanged.bind(this)}/>
        <br/>
        <label>
          Last Name:
        </label>
        <input type="text" value={this.state.customer.lastName} onChange={this.handleLastNameChanged.bind(this)}/>
        <br/>
        <label>
          Status:
        </label>
        <select value={this.state.customer.status} onChange={this.handleStatusChanged.bind(this)}>
          <option value="PENDING">
            Pending
          </option>
          <option value="APPROVED">
            Approved
          </option>
        </select>
        <hr/>
        <button onClick={this.handleButtonClicked.bind(this)}>
          Save Record
        </button>
      </div>
    );
  }
}

Answer 1

You just have to define your method inside your class and call them in button handler, before that you need to update state in input handle change, if you want store weather data in component state you can define another key in state for that and update it when weather data will received and show it in your component or pass it to another component

const apikey = "zVp5GoY9fbwt8h4u5CvcWwneD1emnMMD";

getCity = async (city) => {
  const base = "http://dataservice.accuweather.com/locations/v1/cities/search";
  const query = `?apikey=${apikey}&q=${city}`;

  const response = await fetch(base + query);
  const data = await response.json();

  return data[0];
};

getWeather = async (id) => {
  const base = "http://dataservice.accuweather.com/currentconditions/v1/";
  const query = `${id}?apikey=${apikey}`;

  const response = await fetch(base + query);
  const data = await response.json();

  return data[0];
};

export default class WeatherForm extends React.Component {
  constructor(props) {
    super(props);

    this.handleLocationChanged = this.handleLocationChanged.bind(this);
    this.state = {
      weatherData: null,
      location: props.location,
    };
  }

  handleLocationChanged(event) {
    if (event.target.value) {
      this.setState((prevState) => ({
        ...prevState, //it's for the cases that use another state other than location
        location: event.target.value,
      }));
    }
  }

  handleButtonClicked() {
    const _this = this;

    if (this.state.location) {
      getCity(this.state.location)
        .then((data) => getWeather(data.Key))
        .then((data) => {
          _this.setState((prevState) => ({ ...prevState, weatherData: data }));
          //call backend api here with data from weather api
          console.log(data);
        })
        .catch((err) => console.error(err));
    }
  }

  render() {
    return (
      <div>
        <label>location:</label>
        <input type="text" onChange={this.handleLocationChanged} />
        <br />
        <hr />
        <button onClick={this.handleButtonClicked.bind(this)}>search</button>
        <p>{this.state.weatherData}</p>
      </div>
    );
  }
}

Answer 2

In your handle change functions, you need to use the spread operator to update the state instead of just assigning a new value to it.

For instance, for handleFirstNameChanged try something like this:-

handleFirstNameChanged(event) {
 var customer = this.state.customer;
 customer.firstName  = event.target.value;
 this.setState({...this.state.customer,...customer });
}

This will update your state variable values. Refer to this for better understanding.