For our React Components and Component State lesson, we were tasked to “build a stateful component that renders a scoreboard and utilize the click listener on buttons to increment each team’s score”. We were given a link to a GitHub repository for “American Football Scoreboard”.

This is actually my third time doing this project. I did it once, in WEB23, another time in WEBPT10 and finally, in WEBPT14. I was able to complete it, each time, but I’d definitely say my understanding of the process has improved with each new attempt.

The main project description said:

In this project, you build an app that diplays a scoreboard for an american football game. There will be two buttons for each team – one will increment that team’s score by three points (for a “field goal”) and the other will increment that team’s score by seven points (for a “touchdown” and “extra point”). The css is already done for you. You should focus your efforts on the functionality of the app.

To complete the project, we had to import the useState hook, to give our function component access to state. Then, we had to make sure that team scores were saved to state and were being rendered onscreen from state. We could optionally set initial score values (I used 0) and then add functionality to buttons onscreen using onClick handlers to increment each team’s score by either 3 points (field goal) or 7 points (touchdown) depending on which of two buttons were clicked.

The project focused expressly on our ability to update state, with an initial score value and then with the ability for the user to modify the score. The text and videos for this lesson were exceptionally long, but ultimately, this project is distilled into those two concepts: set initial state and update it.

• View code on GitHub