Login.tsx

import React, { useContext, useEffect } from 'react';
import { Button } from 'react-bootstrap';
import { userContext } from '../helpers/UserProvider';


const Login = () => {
    const { user, logout } = useContext(userContext);

    if (!user.name) {
        return (
            <a href='/login'><Button variant='login' active={false} style={{ maxWidth: '6rem' }}><span>Login</span></Button></a>
        )
    }

    if (user.permissions.active) {
        return <div className='nav-link' style={{ float: 'right' }}><a className='nav-link-entry' href="/survey">Go to Survey</a></div>
    }
    return <div className='nav-link' style={{ float: 'right' }}>
        <span>{'<'}{user.name}{'>'}</span>
    </div>
}

export default Login