Implementing stateful components with Hooks

Now that we have implemented the static structure of our application, we are going to add State Hooks to it to be able to handle state and dynamic interactions!

First, let’s create a new folder for the stateful implementation:

1. Copy the Chapter03_1 folder to a new Chapter03_2 folder, as follows:

   $ cp -R Chapter03_1 Chapter03_2
   

2. Open the new Chapter03_2 folder in VS Code.

Adding Hooks for the user features

To add Hooks for the user features, we are going to have to replace the static username variable with a Hook. Then, we need to adjust the value when we log in, register, and log out.

Adjusting UserBar

When we created the UserBar component, we statically defined a username variable. We are now going to replace it with a State Hook!

Let’s start modifying the UserBar component to make it dynamic:

1. Edit src/user/UserBar.jsx and import the useState Hook, as follows...