Learn React Hooks

Refactoring user components

First, we refactor the user components, and then we move on to the post components.

Let's refactor the user-related components now:

1. Edit src/user/UserBar.js, and also remove the props there (code marked in bold should be removed), since we do not need to manually pass them down anymore:

export default function UserBar ({ user, dispatch }) {    if (user) {        return <Logout user={user} dispatch={dispatch} />    } else {        return (            <React.Fragment>                <Login dispatch={dispatch} />                <Register dispatch={dispatch} />            </React.Fragment>        )    }}

2. Then, we import the useContext Hook and the StateContext in src/user/UserBar.js, in order to be able to tell whether the user is logged in or not:

import React, { useContext } from 'react'