Having problem using useState with weathermapAPI

[abbe]

This is my first react project, and I am having a problem passing input data to the weathermapAPI URL. I can console log the input but it doesn’t allow me to pass it to the URL. Here is the code:

import React, {Component, useState} from "react";
import Axios from 'axios'
import {GoSearch} from 'react-icons/go';

import styles from './ShowWeather.module.css'
import cloudSvg from '../images/cloud.svg'


function ShowWeather() {

  const [city, setCity] = useState("")
  const [weather, setWeather] = useState({})
  const [error, setError] = useState(false)

  const searchCity = async (e) => {
    e.preventDefault()
    console.log("--> " + city)
    try {
      const weatherResponse = await Axios.get(`https://api.openweathermap.org/data/2.5/weather?q=${city}&units=metric&appid=${process.env.React_App_APIKEY}&lang=en`)
      setWeather(weatherResponse)
    } catch (e) {
      console.log(e)
    }

  }

  return (
    <div>
      <div className={styles.wrap}>
        <form onSubmit={searchCity} className={styles.search}>
          <input
            className={styles.searchTerm}
            type="text"
            name="weatherCity"
            placeholder="Search City"
            onChange={(e) => setCity(e.target.value)}
            required
          />
          <button type="submit" className={styles.searchButton}>
            <a><GoSearch/></a>
          </button>
        </form>
      </div>
      <div className={styles.weather_container}>
        <div className={styles.inner_container}>
          <div className={styles.location}>
            <div><i className="fas fa-map-marker-alt"/></div>
            <h3>New York</h3>
          </div>
          <div className={styles.weather_icon}>
            <img src={cloudSvg} alt="cloud image"/>
          </div>
          <div className={styles.cloud_status}>
            <h2>Clear</h2>
          </div>
          <div className={styles.temp}>
            <h1>22.45&deg;C</h1>
          </div>
          <div className={styles.wind_hum}>
            <span><i className="fas fa-wind"/>WS: 1,24 km/s</span>
            <span><i className="fas fa-tint"/>Humidity: 43%</span>
          </div>
        </div>
      </div>
    </div>
  )
}


export default ShowWeather

Appreciate it if you could point out what I am forgetting

[kevinSmith]

Can we see the entire component? Presumably the whole file? I can’t tell what the scope is here. If you have a repo, that would be even easier.

If I were trying to diagnose this, I’d want to see what is happening:

  const searchCity = async (e) => {
    e.preventDefault()
    console.log("--> " + city)
    try {
      const url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&units=metric&appid=${process.env.React_App_APIKEY}&lang=en`
      console.log('url:', url)
      const weatherResponse = await Axios.get(url)
      console.log('weatherResponse type:', typeof weatherResponse)
      console.log('weatherResponse:', JSON.stringify(weatherResponse, null, 2))
      setWeather(weatherResponse)
      console.log('weather:', weatherResponse)
    } catch (e) {
      setWeather("")
      console.log(e)
    }

  }

I am a little surprised by this:

setWeather("")

considering that you initialize it as an object, but I don’t think that that’s your problem.

[abbe]

Hi! thanks for the reply, i have updated the code, i only have one component which is ShowWeather.js

[lasjorg]

Your fetch code works just fine for me. I get back an object from the fetch which is set correctly.

What makes you think it isn’t working? You are not using weather or logging it out, so what makes you think it isn’t being set?

[abbe]

U were right it was silly mistake from my side didn’t console log the weather response. Thanks