Learn React Hooks

Adjusting UserBar

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} ...