FindFurryFriend — Shelter Search

Photo by Angel Luciano on Unsplash

Here is how I built a search in my find furry friend app!

First, I setup a text input box in order to search animal shelters by zip code:

Since we will be typing in the text input box and it will be changing, this is a job for state. So, I also setup local state in my component:

Now that we have our local state and text input box, we need to handle the onChange event for when we type zip code numbers into the text input box (seen in above code for the text input box: onChange={this.handlesearch})

In the handleSearch function we are setting the state to whatever is typed into the zip code search box:

Next, I created a function in order to filter the shelters so we only see shelters that match the zip code numbers typed into the search zip code input box:

Lastly, this is how i’m displaying the shelters. If this.props.loading is truthy then display Loading… if its falsey then filterShelters and pass them down to the ShelterDisplay component.

And here it is all together!

Lifelong Learner