Glow

[Calathea-Z]

` return (

} id="search"> {}

{/* This filters through the search results to suggest breed name completion for the user dynamically as they type. */}

{dogList.filter((dog) => { const searchItem = searchValue.toLowerCase(); const dogName = dog.toLowerCase(); return (searchItem && dogName.startsWith(searchItem) && dogName !== searchItem); }) .slice(0, 8) .map((dog, idx) => (

onSearch(dog)} className="drop-down-row" key={idx}>{dog}

))}

);

};`

We think the above code was the most useful function in the app as it allows the user to filter the dog breed as they type in the search bar. This was difficult & fun to figure out how to make work.

[maker-jws]

Agree, the search functionality of the site is nice touch and gives your app that extra something feature-wise.

It would be interesting to see a feature added. If you hover over a name, a fetch call is placed to the api to provide a 'preview' image to be shown in a card over the name.

Much more expensive process - perhaps having a commonly searched for cache of JSON stored locally to filter against for a pick might be worth looking into as well.