You'll build a small React application where you'll update state in response to a fetch payload and pass props among components to handle updates.
Time to put all of our hard-earned knowledge to the test! This lab is fairly big, and will require you to use everything you've learned up to this point. Don't be intimidated, there are plenty of tests to guide you along the way! In this lab, we'll be working on a front-end for an animal shelter. Sadly, there still are way too many cute pets without any owners. Let's help them out by creating a UI in React!
We strongly recommend completing this lab using Behavior Driven Development (BDD)––test the functionality in the browser before running the tests. You'll have a much better time seeing the results in the browser.
npm i && npm start to run this project in your browser
On a high level, you will be working on several components that form the UI of the animal shelter adoption application. Users can filter for pets by type, and can adopt a pet of their choosing. Once a pet is adopted, they cannot un-adopt it. No backsies!
There are several components that need your attention. All of these components
can be found in the
components/ folder. Starting from the top-level and
working our way down through all its descendants:
App should pass a callback prop,
<Filters />. This
callback needs to update
<Filters /> needs a callback prop,
onFindPetsClick. When the
<Filters /> component calls
<App /> should fetch a list
of pets using
/api/petswith an optional query parameter.
'all', send a request to
'cat', send a request to
/api/pets?type=cat. Do the same thing for
state.petswith the results of your fetch request so you can pass the pet data down as props to
Even though we're using
fetch here, its responses have been mocked in
order to make the tests work properly. That means it's important to use the
exact URLs as described above, or your tests will fail!
The pet data received should include information on individual pets and their adoption status.
onChangeTypecallback prop. This callback prop gets called whenever the value of the
<select>element changes with the value of the
onFindPetsClickcallback prop. This callback prop gets called when the users clicks the 'Find pets' button.
petsprop. This is an array of pets that the component uses to render
<Pet />components. App should determine which pets to pass down as props. App should be responsible for filtering this list based on the types of pets the user wants to see.
onAdoptPetprop. This callback prop gets passed to its
<Pet />children components.
petprop. Use the attributes in this data to render the pet card correctly. It should show the pet's
weight. Based on the pet's
gender, the component also needs to contain either a male (
♂) or female (
Should receive an
isAdopted prop. Using this prop, render the correct button
in the pet's card; if the pet is adopted, show the disabled button. Otherwise,
show the primary button to adopt the pet.
Should receive an
onAdoptPet callback prop. This callback prop gets called
with the pet's
id when the user clicks the adopt pet button — not when they
click the disabled button!
View Props And State Lab on Learn.co and start learning to code for free.