Function and Event Handling in ReactJS

Our app uses arrow functions to keep logic clean and modern. These functions are often attached to event listeners like onClick to respond to user actions.

Here’s how we handle the Search button:

const handleSearch = async () => {
  const data = await getWeatherByCity(city);
  setWeather(data);
};

This function is triggered when a user clicks the “Search” button:

<button onClick={handleSearch}>Search</button>

Event-driven design like this helps React apps stay interactive and responsive. The handleSearch function is responsible for calling our API function, retrieving the weather, and updating the app state.