Recall that when we created the UserBar component, we statically defined the user value. We are now going to replace this value with a State Hook!

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

1. Edit src/user/UserBar.js, and import the useState Hook by adjusting the React import statement, as follows:

import React, { useState } from 'react'

2. Remove the following line of code:

    const user = 'Daniel Bugl'

Replace it with a State Hook, using an empty user '' as the default value:

    const [ user, setUser ] = useState('')

3. Then, we pass the setUser function to the Login, Register, and Logout components:

    if (user) {
        return <Logout user={user} setUser={setUser} />
    } else {
        return (
            <React.Fragment>
                <Login setUser={setUser} />
                <Register setUser={setUser} />
            </React.Fragment>
        )
    }

Now, the UserBar component provides a setUser function, which can be used in the Login, Register, and Logout components to set or unset the user value.