| name | menu | route |
|---|---|---|
5 - Build Next and Favorite UI |
Tinder For Cats |
/tinder-for-cats/build-next |
import Code from '../components/code'
First thing we will need to do is install react-icons. On CodeSandbox you do this by clicking Add Dependency, and searching for and clicking react-icons. Now CodeSandbox will automatically install it in your project.
After this we want to indicate which icons we want to use: GoHeart and GoArrowRight. We have to import them from /go, so we write:
<Code
code={import { GoHeart, GoArrowRight } from "react-icons/go";}
/>
Now it's time to add our JSX so that we can show our buttons, but they won't actually do anything yet. After the <figure> tag paste this JSX:
<Code code={`
Now that we have added the JSX above, we want add the functionality to get a new cat when we click the next button. To do this we use the event handler called onClick, and attach it to the button and call a function inside of it.
We are attaching it to the button and not the actual icon because of accessability concerns. If someone with an assisting technology device tries to access our website and the onClick is on the icon, it will not be announced as a button.
We already have the getCat function that we can use to get a new cat, so we need to attach it on the button:
<Code code={`
When you now click on the next button, you will get a new cat! 🎉