Why the map doesn't update when you switch conditions in React (Supabase x Google Maps)

#javascript #react #api #database

Introduction

Using React, Supabase, and Google Maps, I was creating a filter function that toggles between "WiFi, power, and voice enabled" conditions.

However, I encountered a situation where the pin didn't change even when I pressed the WiFi button.

Cause

// State

const [filters, setFilters] = useState({
wifi: false,
power: false,
voice: false, // ← React name
});

// Data
spot = { name: "Cafe A", wifi: true, power: true, talking: true }; // ← Supabase

filter() looked at spot.voice,
but the actual data was spot.talking.
Because I was looking at a non-existent property, the condition always failed.

After Fix

const [filters, setFilters] = useState({
wifi: false,
power: false,
talking: false, // ← Consistent names
});

const filteredSpots = spots.filter((spot) => {
if (filters.wifi && !spot.wifi) return false;
if (filters.power && !spot.power) return false;
if (filters.talking && !spot.talking) return false;
return true;
});