CodingNic

Add Location & User Interactions

Handle the Search Form

Add Location & User Interactions 10 min read

Handle the Search Form

Task

Make the search interaction use the shared weather request path.

File / section

src/components/SearchPanel.jsx and src/App.jsx

Change

Keep <form onSubmit={onSearch}> in SearchPanel. In App.jsx, searchCity should call e.preventDefault(), reject an empty trimmed city, then call loadWeather(...).

Why this change matters

Keeping the event handling in the page-level function means search and location can share loading, errors, and response storage.

Test it

Press Enter inside the search box and click Search. Both should trigger the same request.

Checkpoint

City search works from both the button and keyboard submission.