Learn React Hooks

The UserBar component

Now it is time to put our user-related components together into a UserBar component. Here we are going to conditionally show either the Login and Register components, or the Logout component, depending on whether the user is already logged in or not.

Let's start implementing the UserBar component:

1. First, we create a new src/user/UserBar.js file, and import React as well as the three components that we defined:

import React from 'react'import Login from './Login'import Logout from './Logout'import Register from './Register'

2. Next, we define our function component, and a value for the user. For now, we just save it in a static variable:

export default function UserBar () {    const user = ''

3. Then, we check whether the ...