Resolving search query & API call in ReactJS weather APP

Question

I had this operational, now just blanking.. Just trying to search weatherBit API by city name for data below are my onChange and handleSearch (from child onClick) functions...

Below is my App.js component. thanks in advance.

    constructor(props) {
    super(props)
    this.state = {
      response: [],
      inputVal: ""
    }
  }

  handleSearch = () => {
    getWeatherData(this.state.inputVal) //(call getWeatherData function from below)
  }

  componentDidMount() {
    getWeatherData = inputVal => {
      fetch(
        "https://api.weatherbit.io/v2.0/current?city=Seattle,WA&key=168c5cb818e74abd926a9d65d285d48f"
      )
        .then(res => res.JSON())
        .then(data => {
          this.setState({ response: data })
          console.log(data)
        })
    }

    //handleChange from WeatherQuery input:
    handleOnChange = e => {
      this.setState({ inputVal: e.target.value })
    }
  }

  render() {
    return (
      <div className="container">
        <WeatherQuery
          handleChange={this.state.handleChange}
          handleSearch={this.state.handleSearch}

    )
  }
}
export default App

this is my input from child component->

<input
          onChange={event => 
     this.props.handleChange(event)}
          name="text"
          type="text"
          placeholder=""
          value={this.state.inputVal}
        />

score 0 · Answer 1 · answered Feb 25 '20 at 15:50

does getWeatherData have to live inside componentDidMount()?

I know why you are doing it, you want to call the function getWeatherData after it mounted. But your component is class based, so you can easily the function by using this.getWeatherData()

Same,

ALSO handleSearch = () might need a Parameter

Hope that helps

Resolving search query & API call in ReactJS weather APP

1 Answers1