Head.js

import React, { useContext } from 'react';
import mano from './mano.svg';
import { Navbar, Nav, NavDropdown, Button, Form } from 'react-bootstrap';
import AuthContext from './AuthContext';

function Head(props) {
    const auth = useContext(AuthContext);

    let adminNav;
    if (auth.role === "admin") {
        adminNav = (
            <NavDropdown title="Admin" id="admin">
                <Nav.Link href="/members">Socias</Nav.Link>
            </NavDropdown>
        );
    }
    return (
        <Navbar bg="light">
            <Navbar.Brand href="/">
                <img src={mano} width="30" height="30" className="d-inline-block align-top" alt="Garbanzo Negro" />
            </Navbar.Brand>
            <Navbar.Toggle aria-controls="basic-navbar-nav" />
            <Navbar.Collapse id="basic-navbar-nav">
                <Nav className="mr-auto">
                    <Nav.Link href="/">Dashboard</Nav.Link>
                    <Nav.Link href="/products">Productos</Nav.Link>
                </Nav>
                {adminNav}
                <Form inline>
                  <Button
                    variant="outline-success"
                    onClick={props.onLogout}
                  >
                  Salir
                  </Button>
                </Form>
            </Navbar.Collapse>
        </Navbar>
    )
}

export default Head;