I'm trying to create a Weather app to practice React and have a few issues. You can find my code here:

CodePudding user response：

Sorry if I missed something.. but I have made a simple change and it seems to work for me. I am new to React myself, just started getting into it last night. But here is the code:

const Weather = () => {
  const [data, geWeatherData] = useState(undefined);
  const [city, setCity] = useState("New York");
  const [click, handleClick] = useState(false); // not sure why this is used


  const updateApi = () => {
    const getWeather = async () => {
      city &&
        (await weatherData(city).then((response) => {
          geWeatherData(response.data);
          console.log(response.data.main.temp);
        }));
    };
    getWeather();
  }

  // useEffect(() => {
  //   if (!click) {
  //     const getWeather = async () => {
  //       city &&
  //         (await weatherData(city).then((response) => {
  //           geWeatherData(response.data);
  //           // console.log(response.data);
  //           console.log(response.data.main.temp);
  //         }));
  //     };
  //     getWeather();
  //     handleClick(true);
  //   }
  // }, [click, city]);

  const classes = useStyles();
  return (
    <Box className={classes.component}>
      <Box className={classes.weatherContainer}>
        <Form
          data={data}
          city={city}
          setCity={setCity}
          handleClick={updateApi} // Altered line here
        />
      </Box>
    </Box>
  );
};

export default Weather;

I figured that you search the City via key press (Enter). So I thought it's better to call a function (updateApi) when Enter is pressed.

Regarding the background change, I see Drew Reese has got the answer for you.

CodePudding user response：

Here is a forked example to make search work:

https://codesandbox.io/s/newweather-dec-forked-113re