Search Populate with car type, city (details are below)

[mandyjmiller]

Car Types Sport Hatchback Small Electric Sport Small Hatchback Hatchback SUV Small

Location London Birmingham Manchester Cambridge Liverpool Newcastle Exeter Sheffield Leeds Nottingham

[mandyjmiller]

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 (

Search for Cars

{/*THIS WAS THE REGULAR TEXT INPUT... NOW REPLACED BY THE below....: /* setType(e.target.value)} /> */} setType(e.target.value)}> Select type {types.map((loc, index) => ( {loc} ))} {/* setLocation(e.target.value)} /> */} setLocation(e.target.value)}> Select location {locations.map((loc, index) => ( {loc} ))} Search

{/* {filteredCars.map(car => ( ))} */}

); };

export default CarSearch; `