Open mandyjmiller opened 5 months ago
This is the code I used to mockup dropdowns in search. It works, but doesn't include vehiicle brand.
`///THIS DEFINES THE SEARCH. ALSO HANDLERS TO AVOID ANY ERRORS RESULTING FROM CASE SENSITIVITY const CarSearch = ({ data }) => { const [type, setType] = useState(""); const [location, setLocation] = useState(""); const [filteredCars, setFilteredCars] = useState(data);
///THIS CREATES AN ARRAY FROM THE CAR DATA TO INCLUDE ALL LOCATIONS IN THE DATA. BETTER THAN HARDCODING IN THE VALUES AS THEY MAY CHANGE const locations = Array.from(new Set(data.map((car) => car.location)));
///THIS CREATES AN ARRAY FROM THE CAR DATA TO INCLUDE ALL CAR TYPES IN THE DATA. const types = Array.from(new Set(data.map((car) => car.type)));
const handleSearch = () => { const filtered = data.filter((car) => { const typeMatch = car.type.toLowerCase().includes(type.toLowerCase()); const locationMatch = car.location .toLowerCase() .includes(location.toLowerCase()); return typeMatch && locationMatch; }); setFilteredCars(filtered); };
///THIS IS THE SEARCH FORM. WE SHOULD CHANGE type="text" TO LIST POPULATED BY THE AVAILABLE OPTIONS //ALSO SHOULD ADD 'DATE SEARCH' return (
); };
export default CarSearch; `
Car Types Sport Hatchback Small Electric Sport Small Hatchback Hatchback SUV Small
Location London Birmingham Manchester Cambridge Liverpool Newcastle Exeter Sheffield Leeds Nottingham