React Coding Challenges: Building a Weather Application

Add a Loading Indicator

Modify the weather app to show a loading spinner or message while fetching data.

Expected output: A visible loading message or spinner appears during API calls.

Hint: Use a loading state variable and conditional rendering.

Implement Error Handling

Enhance the app to display user-friendly error messages when the API call fails or the city is not found.

Expected output: Clear error messages appear on invalid input or network failure.

Hint: Catch errors and update an error state to render messages.

Create a Reusable WeatherCard Component

Refactor the weather display into a separate component that accepts weather data as props.

Expected output: Weather information is displayed via the new WeatherCard component.

Hint: Pass data via props and use destructuring inside the component.

You can fetch data inside the useEffect hook to perform side effects after the component renders. This ensures data fetching happens at the right lifecycle moment.

useState is a hook that lets you add state variables to functional components, enabling dynamic UI updates based on user interaction or data changes.

You can catch errors in the promise chain or async/await syntax and update an error state variable to display error messages to users.