CODEWITHSUNDEEP
reactjsapisearchcity
Michael DeS
Michael DeS

Reputation: 21

Resolving search query & API call in ReactJS weather APP

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

Upvotes: 0

Views: 181

Answers (1)

adnan tariq
adnan tariq

Reputation: 197

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

Upvotes: 0

Related Questions