Challenge: Implement a Feature to Add and Remove Locations Dynamically

Overview:

In this challenge, you will enhance the "Weather Dashboard" project by adding functionality to add and remove locations dynamically. This will help you practice managing state, conditional rendering, and enhancing user experience.

Objective:

• Learn how to dynamically add and remove items from a list.
• Practice managing state and using conditional rendering in React.

Instructions for the Interactive Code Block:

Step 1: Create a Remove Button for Each Location

Add a remove button to each WeatherCard component. When clicked, this button should trigger a function to remove the corresponding location from the list.

Step 2: Implement the <strong>handleRemoveLocation</strong> Function

Create a function called handleRemoveLocation in the WeatherDashboard component that removes the specified location from the state.

Step 3: Pass the Remove Function to WeatherCard

Pass the handleRemoveLocation function as a prop from WeatherDashboard to WeatherCard.

Step 4: Add Conditional Rendering for Remove Button

In the WeatherCard component, conditionally render the remove button only if the onRemoveLocation prop is provided.

Step 5: Test Adding and Removing Locations

Run your application and test the functionality by adding and removing locations. Ensure that the locations are correctly added to and removed from the state, and that the UI updates accordingly.

Next Steps:

• Improve the User Interface: Add styles to the remove button to make it visually distinct and user-friendly.
• Error Handling: Handle cases where the user tries to add a duplicate location or an invalid location.
• Persist Data: Implement functionality to save the list of locations in local storage so that it persists across page reloads.

By completing this challenge, you will enhance your Weather Dashboard project with dynamic add and remove functionality, making it more interactive and user-friendly. Enjoy enhancing your dashboard!

Hint Step 1: Pass a function as a prop from the WeatherDashboard component to the WeatherCard component.

// In WeatherCard component, add a button to remove the location
<button onClick={() => handleRemoveLocation(location)}>Remove</button>

Hint Step 2: Use the filter method to create a new array excluding the location to be removed.

// Function to remove a location
function handleRemoveLocation(location) {
  setLocations(locations.filter(loc => loc !== location));
  // Optionally, remove the corresponding forecast as well
  const newForecasts = { ...forecasts };
  delete newForecasts[location];
  setForecasts(newForecasts);
}

Hint Step 3: Include the function in the props when rendering the WeatherCard.

// In WeatherDashboard component
<WeatherCard
  key={loc}
  location={loc}
  forecast={forecasts[loc]}
  onRemoveLocation={handleRemoveLocation}
/>

Hint Step 4: Use a ternary operator or if statement for conditional rendering.

// In WeatherCard component
{onRemoveLocation && <button onClick={() => onRemoveLocation(location)}>Remove</button>}