Filtering and Search Features

🔍 Filtering and Search Features in a Weather App

A weather app becomes far more useful when users can quickly search cities or filter based on temperature, weather type, or even region. In this guide, you’ll learn how to implement filtering and search features in a React-based weather app using real API data. 🌦️🌍

📦 Requirements & Setup

• ⚛️ React (with useState, useEffect)
• 📡 OpenWeatherMap API or mock JSON
• 🎨 Tailwind CSS (optional for styling)

🧪 Sample City Data

Let’s assume we’ve pre-fetched weather data for multiple cities (mock data):

const weatherData = [
  { id: 1, city: "Delhi", temp: 32, condition: "Clear" },
  { id: 2, city: "Mumbai", temp: 28, condition: "Clouds" },
  { id: 3, city: "Bangalore", temp: 24, condition: "Rain" },
  { id: 4, city: "Chennai", temp: 34, condition: "Clear" },
];

🔠 City Search Bar

function SearchBar({ onSearch }) {
  const [input, setInput] = useState("");

  const handleSubmit = (e) => {
    e.preventDefault();
    onSearch(input);
  };

  return (
    <form onSubmit={handleSubmit} className="flex gap-2 mb-4">
      <input
        type="text"
        placeholder="Search by city"
        value={input}
        onChange={(e) => setInput(e.target.value)}
        className="border p-2 rounded"
      />
      <button className="bg-blue-500 text-white p-2 rounded">
        🔍 Search
      </button>
    </form>
  );
}

📂 Filter by Weather Condition

function ConditionFilter({ onFilter }) {
  return (
    <select onChange={(e) => onFilter(e.target.value)} className="p-2 mb-4">
      <option value="All">All Conditions</option>
      <option value="Clear">Clear</option>
      <option value="Clouds">Clouds</option>
      <option value="Rain">Rain</option>
    </select>
  );
}

🧠 Combining Search and Filter

Handle both in your main component:

function WeatherApp() {
  const [query, setQuery] = useState("");
  const [filter, setFilter] = useState("All");

  const filteredWeather = weatherData.filter((entry) => {
    const matchesSearch = entry.city.toLowerCase().includes(query.toLowerCase());
    const matchesFilter = filter === "All" || entry.condition === filter;
    return matchesSearch && matchesFilter;
  });

  return (
    <div className="max-w-xl mx-auto p-4">
      <h1 className="text-2xl font-bold mb-4">🌦️ Weather Dashboard</h1>

      <SearchBar onSearch={setQuery} />
      <ConditionFilter onFilter={setFilter} />

      {filteredWeather.length === 0 ? (
        <p>❌ No results found.</p>
      ) : (
        <ul>
          {filteredWeather.map((item) => (
            <li key={item.id} className="border p-3 mb-2 rounded">
              📍 {item.city} - 🌡️ {item.temp}°C, ☁️ {item.condition}
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}

📊 Bonus: Filter by Temperature Range

function TempRangeFilter({ onChange }) {
  return (
    <div className="mb-4">
      <label className="block mb-1">Min Temp: </label>
      <input type="range" min="0" max="40" onChange={(e) => onChange(Number(e.target.value))} />
    </div>
  );
}

🧪 UX Enhancements

• 🔄 Add loading state while fetching fresh data
• ⚠️ Show “No cities found” on empty results
• 📍 Highlight current selection or search term
• 📱 Ensure layout is responsive for mobile users

📋 Summary

• ✅ Implemented live search by city name
• ✅ Added weather condition dropdown filter
• ✅ Combined both for a powerful UI
• ✅ Provided scalable structure for more filters

🚀 Final Thoughts

Filtering and search features are crucial to building an intuitive weather app. Users expect to find relevant data quickly. With this structure, you can add more filters like temperature, wind speed, or even region grouping later on. 🔎🌍📊