In this lab, you will create a likes component in React. Your final product should function similarly to this deployed version of the component.
- Clone this repo and cd into it.
- Create a new react app named
react_likes
in this directory. - Change into your
react_likes
app and begin your work from there.
Create a new component called Likes in the src
directory and add functionality to it so that when the render component it records the number of clicks in state and displays the total clicks.
- Use the
useState
hook to add state calledtotalLikes
to the component to store the current number of clicks on the component. - Initialize the
totalLikes
state as0
. - In your JSX, render a
button
element with it's text set to the value oftotalLikes
. - Include an
onClick
attribute on the start button which calls a function that increments the value oftotalLikes
. - Make a commit with a message that reads "Add MVP functionality"!
- Change the increment button to have a
+
as its text. - Add another button that decrements the
totalLikes
and has a-
as its text. - Render the
totalLikes
to the page in ap
element. - Once you have the
totalLikes
displaying on the page, move just the display paragraph into its own component called LikeTotal and have the Likes component you built render it (hint: use props to pass the value oftotalLikes
to your new LikeTotal component). - Make another commit with a message that reads "Add decrement button".
- Make it so that the
totalLikes
can never display a value less than0
.