Trying to refresh Open Weather Api every 3 or 30 seconds

I created a simple weather web app from a youtube video and I wanted it to refresh every 3 or 30 seconds automatically but I'm getting an unidentified error when I try to use setInterval:

App.js:15 Uncaught TypeError: Cannot read properties of undefined (reading 'key') at search (App.js:15:1)

I just started react-js, here's my code:

import './App.css';
import React, { useState } from 'react';

const api = {
  key: "5f285d33be01b937453b7e1688fc75ee",
  base:"https://api.openweathermap.org/data/2.5/"
}

function App() {
  const [query, setQuery] = useState('');
  const [weather, setWeather] = useState({});

  const search = evt => {
    if (evt.key === "Enter") {
      fetch(`${api.base}weather?q=${query}&units=metric&APPID=${api.key}`)
      .then(res => res.json())
      .then(result => {
        setWeather(result);
        setQuery('');
        console.log(result);
      });
    }
  }
//

  const dateBuilder = (d) => {
    let months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
    let days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];

    let day = days[d.getDay()];
    let date = d.getDate();
    let month = months[d.getMonth()];
    let year = d.getFullYear();
    
    return `${day} ${date} ${month} ${year}`
  }

  function round(value, precision) {
    var multiplier = Math.pow(10, precision || 0);
    return Math.round(value * multiplier) / multiplier;
  }

  return (
    <div className={(typeof weather.main != "undefined")? ((weather.main.temp > 9) ? ((weather.weather[0].main == 'Rain')? 'app rain': ((weather.weather[0].main == 'Clouds')? 'app clouds': 'app warm')) : 'app'): 'app'}>
      <main>
        <div className='search-box'>
          <input type="text" className='search-bar' placeholder='Search...' onChange={e => setQuery(e.target.value)} value={query} onKeyPress={search} />
        </div>
        {(typeof weather.main != "undefined") ? (
          <div>
            <div className='loaction-box'>
              <div className='location'>
                {weather.name}, {weather.sys.country}
              </div>
            <div className='date'>{dateBuilder(new Date())}</div>
          
            <div className='weather-box'>
              <div className='temp'>
                {Math.round(weather.main.temp)}°c
                <div className='weather-small'>
                  Humidity: {weather.main.humidity}%
                  <br/>
                  Wind: {round(weather.wind.speed,1)}km/h
                </div>
                <div className='weather-small'></div>
              </div>
              <div className='weather'>
                {weather.weather[0].description}</div>
              </div>
            </div>
          </div>
        ): ('')}
      </main>
    </div>
  );
}

export default App;

There is no setInterval in the shared code snippet but based on the code and the included error message I am assuming you tried passing search as the interval callback.

setInterval(search, 3000);

The issue here is that search expects to be passed an onKeyPress event object.

const search = evt => {
  if (evt.key === "Enter") { // <-- evt undefined
    fetch(`${api.base}weather?q=${query}&units=metric&APPID=${api.key}`)
      .then(res => res.json())
      .then(result => {
        setWeather(result);
        setQuery('');
        console.log(result);
      });
  }
}

I suggest refactoring the code a bit. Factor out the fetching logic from the keypressing logic. Create a onKeyPress handler that invokes the search callback and passes the query state, and use a useEffect hook with a dependency on the query state to instantiate an interval timer.

Example:

const search = async (query) => {
  try {
    const res = await fetch(`${api.base}weather?q=${query}&units=metric&APPID=${api.key}`);
    const result = await res.json();
    setWeather(result);
    console.log(result);
  } catch (error) {
    // catch & handle any Promise rejections and thrown errors
  }
}

const keyPressHandler = async (evt) => {
  if (evt.key === "Enter") {
    await search(query);
    setQuery('');
  }
}

useEffect(() => {
  let timer = null;
  if (query) {
    timer = setInterval(search, 3000, query);
  }
  return () => clearInterval(timer);
}, [query]);