In this task, we will make a website that looks like this. Here is a starting point fork and clone this repo
- In
PetItem.js
, create a state for the pet image with an inital value ofpet.image
. - Pass it to the image's
src
tag. - Add an
onClick
to the button that changes the state from"pet.image
to"pet.image2"
- Test your code, the button should change the image to a gif!
- In
PetsList
, create a state calledquery
and a method calledsetQuery
. - In the input tag of
SearchBar
add an onChange method that callssetQuery()
and gives itevent.target.value
as an argument. - At this point, whatever you type in your search bar should appear in the
query
state inReact Dev Tools
. - In your
PetsList
, filter your pets by comparing your pet's name withquery
usingincludes
before you map your list so you can deal with plain javascript object. - At this point, our search bar is case sensitive. Fix it so that it becomes case insensitive.
- in
PetsList
, create a state calledtype
and a method calledsetType
. - In the select tag of
PetSelector
add an onChange method that callssetType()
and gives itevent.target.value
as an argument. - At this point, whatever you select in your selector should appear in the
type
state inReact Dev Tools
. - In your
PetsList
, filter your pets by comparing your pet's type withtype
usingincludes
.
- Move all your search bar code to it's own component and pass setQuery as a prop to your new component.
- Move all your selector code to it's own component and pass setType as a prop to your new component.